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

本身它不会解决您的问题，因为您使用value绑定设置复选框的attr，并且Knockout（3.0版之前）按顺序触发绑定。因此，首先执行checked绑定，但找不到值，因此无法设置复选框。

您可以升级到knockout 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/

在视图模型中设置选定值时，不会选中Knockout js复选框

2 个答案: