數據綁定不能使用從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選擇器或元素的引用）。