如何在 Knockout JS 中正确建模/清除可观察值（文本区域字段未更新）？

Question

我正在 KO 中创建一个模型来表示和绑定到 html 表单上的字段。

我的想法是，我可以单击一个按钮，该按钮将插入默认页面名称（文本表单字段值），然后清除（插入空白字符串）到其他表单字段（所有文本区域字段）

测试：

为每个表单字段填写一个值
按“添加新页面”按钮
它将在第一个字段中插入默认页面名称值
它不会像我预期的那样在文本区域插入空白值

我应该做些什么来正确地 bind/clear 与 textarea 字段相关的值？

function Page() {
    self = this;
    self.name = ko.observable("");
    self.HEADhtml = ko.observable("");
    self.HEADERhtml = ko.observable("");
    self.FOOTERhtml = ko.observable("");
    
    self.initialize = function()
    {
        self.name("New Page");
        self.HEADhtml("");
        self.HEADERhtml("");
        self.FOOTERhtml("");
    }
    
    self.save = function()
    {
        alert('Save Function Placeholder');
    }
}

function koScope()
{
    var self = this;
    
    self.currentpage = new Page();    
}

ko.applyBindings(new koScope());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div class="sidebar-block text-center">
    <button class="btn btn-block btn-success" data-bind="click: currentpage.initialize">Add New Page</button>
</div>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="pagename" class="col-sm-3 control-label">Page Name</label>
    <div class="col-sm-9">
      <input class="form-control" id="pagename" type="text" data-bind="value: currentpage.name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">HTML HEAD</label>
    <div class="col-sm-9">
      <textarea class="form-control" rows="5"  data-bind = "text: currentpage.HEADhtml"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">HTML HEADER</label>
    <div class="col-sm-9">
      <textarea class="form-control" rows="5" data-bind = "text: currentpage.HEADERhtml"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">HTML FOOTER</label>
    <div class="col-sm-9">
      <textarea class="form-control" rows="5" data-bind = "text: currentpage.FOOTERhtml"></textarea>
    </div>
  </div>
  <div class="form-group margin-none">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-primary" data-bind = "click: currentpage.save">Save</button>
    </div>
  </div>
</form>

Answer 1

对于输入和文本区域，您要使用 value 绑定，而不是 text 绑定。

如何在 Knockout JS 中正确建模/清除可观察值（文本区域字段未更新）？

How do I properly model / clear observable values in Knockout JS (text area fields are not updating)?

knockout.js

knockout-3.0