数据绑定不适用于从 JavaScript 以编程方式设置的模板答案

【问题标题】：Data-bind not working with templates set programmatically from JavaScript数据绑定不适用于从 JavaScript 以编程方式设置的模板
【发布时间】：2011-12-20 05:21:00
【问题描述】：

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

使用：jQuery 1.5.2；淘汰赛1.3.0 beta

我正在尝试将无序列表绑定到视图模型中的可观察数组，并将列表项对象上的复选框绑定到另一个具有“已检查”绑定的 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");
  }
}

你的想法是什么？提前感谢您的帮助。彼得

【问题讨论】：

如果模板 1 有效，您为什么要让模板 2 有效？有效的模板 1 是测试版中引入的新方法。
只是出于好奇。我想知道我是否做错了什么，或者这只是一个错误的方法。 RP Niemayer 的回答：'它不会进行数据绑定或清理任何现有的绑定'解决了我的疑虑。

标签： knockout.js jquery-templates

【解决方案1】：

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

您可能希望使用template 绑定：http://knockoutjs.com/documentation/template-binding.html。

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

【讨论】：

感谢您的解释。我正在将 Knockout 框架引入现有项目，因此我认为我可以保留大块完整并在需要时引入一些 KO。