数据绑定不能使用从JavaScript以编程方式设置的模板

Question

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

使用：jQuery 1.5.2;淘汰赛1.3.0测试版

我想绑定一个无序的列表到视图模型中的observable数组，并将列表项目对象上的复选框绑定到另一个具有“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

当使用jQuery的淘汰赛模板，你将永远不会真的想直接调用.tmpl，因为它不会做数据绑定或清理任何现有绑定。

你会想要使用template绑定：http://knockoutjs.com/documentation/template-binding.html。

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