knockout.js 在视图模型中设置所选值时,未选中Knockout js复选框

gcuhipw9  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(151)

我的问题是,当我通过视图模型设置选中复选框的值时,直到我单击另一个复选框时,这些复选框才被选中。

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>

Java脚本:

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());
    };
}
u5rb5r59

u5rb5r591#

observableArray添加项的正确方法是直接在observableArray上调用push(这样KO会收到数组被更改的通知):

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

它本身并不能解决你的问题,因为你是用attr绑定来设置复选框的value,而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

dwthyt8l

dwthyt8l2#

仅编辑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/

相关问题