数据绑定不适用于通过 JavaScript 以编程方式设置的模板

Question

我是 KnockOut JS 的新手，我找不到使用 jQuery text/x-jquery-tmpl 时数据绑定不起作用的原因。

使用：jQuery 1.5.2； knockout 1.3.0 beta

我试图将无序列表绑定到视图模型中的可观察数组，并将列表项对象上的复选框绑定到具有“checked”绑定的另一个 ko.observble 数组。

工作模板代码是：

<ul data-bind="foreach: viewModel.booksFromServer()">
  <li>
    <input type="checkbox" data-bind="checked: viewModel.selectedBooks(), value: Id" />
  </li>
</ul>

这不起作用，即显示列表但所选值不存储在数组中：

<script type=""text/x-jquery-tmpl" id="bookTemplate">
  {{each data}}
    <li> 
      <input type="checkbox" value="${Id}" data-bind="checked: selectedBooks" />
    </li>
  {{/each}}
</script>

在我的视图模型中：

var viewModel ={
  selectedBooks = ko.observableArray(),
  booksFromServer = ko.observableArray()
  //other properties and methods
  showBookList: function(bookList){
    $("#bookTemplate").tmpl({data: bookList}).appendTo("#book_list");
  }
}

你的想法是什么？预先感谢您的帮助。 皮奥特尔

Answer 1

在 Knockout 中使用 jQuery 模板时，您永远不会真正想要直接调用 .tmpl，因为它不会执行数据绑定或清理任何现有绑定。

您需要使用 template 绑定： http://knockoutjs.com /documentation/template-binding.html。

当您调用 showBookList 时，您可以填充使用模板绑定绑定的 observableArray，并且您的 UI 将相应更新。这样，您的视图模型实际上只处理数据，而不依赖于 UI 的结构（视图模型代码中不引用 jQuery 选择器或元素）。