0

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

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

去测试：

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

我应该做些什么来正确绑定/清除与 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>

4

1 回答 1

0

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

于 2015-03-30T00:37:42.510 回答