在視圖模型中設置選定值時，未選中Knockout js複選框

Question

我的問題是，當我通過viewmodel設置所選複選框的值時，複選框不會被選中，直到我單擊另一個複選框。

這的jsfiddle說明我遇到的問題： http://jsfiddle.net/xaradebz/eHj5X/3/

還張貼代碼在這裏是明確的：

HTML：

<input type="checkbox" data-bind="checked: selectedTags, attr: {value: '1', id: '1'}" /> 1 
<input type="checkbox" data-bind="checked: selectedTags, attr: {value: '2', id: '2'}" /> 2 
<input type="checkbox" data-bind="checked: selectedTags, attr: {value: '3', id: '3'}" /> 3 

<button data-bind="click: alertMe">Click Me</button> 

JAVASCRIPT：

function ViewModel() { 
    var self = this; 

    self.selectedTags = ko.observableArray([]); 

    // I added 1 to the selected tags array 
    self.selectedTags().push('1'); 

    self.alertMe = function() { 
     alert(self.selectedTags()); 
    }; 
} 

Answer 1

項目添加到observableArray的正確的方法是直接調用push上observableArray（KO這樣會通知您陣列已更改）：

self.selectedTags.push('1'); //no() after selectedTags 

它本身不會解決你的問題，因爲您正在使用attr綁定來設置複選框的value，並且Knockout（版本3.0之前）按順序觸發綁定。因此，您的checked綁定首先被執行，但找不到值，因此無法設置您的複選框。

您可以升級到淘汰賽3.0來解決這個或更改綁定順序：

<input type="checkbox" 
     data-bind="attr: {value: '1', id: '1'}, checked: selectedTags" /> 1 
<input type="checkbox" 
     data-bind="attr: {value: '2', id: '2'}, checked: selectedTags" /> 2 
<input type="checkbox" 
     data-bind="attr: {value: '3', id: '3'}, checked: selectedTags" /> 3 

演示JSFiddle。

Answer 2

只需編輯HTML：

<input type="checkbox" data-bind="checked: selectedTags" value="1" id="1" /> 1 
<input type="checkbox" data-bind="checked: selectedTags" value="2" id="2" /> 2 
<input type="checkbox" data-bind="checked: selectedTags" value="3" id="3" /> 3 

<button data-bind="click: alertMe">Click Me</button> 

http://jsfiddle.net/eHj5X/6/