KnockoutJS 检查绑定问题答案

【问题标题】：KnockoutJS checked binding issueKnockoutJS 检查绑定问题
【发布时间】：2013-05-02 22:11:14
【问题描述】：

我对 knockoutjs 比较陌生，但我似乎遇到了一个 observableArray 复选框的问题，这些复选框有一些可观察的属性，用于检查和禁用。

使用敲除我可以选中和取消选中该框，但似乎一旦我手动与复选框交互（即用鼠标单击它），基础数据似乎正在改变，但我不能使用敲除检查或取消选中该框。

HTML

<div id="filterByPrice" data-bind="foreach: priceFilters">
    <div>
        <input type="checkbox" data-bind="attr: {id: $index, value: value, checked: checked, disable: disabled}" />
        <span data-bind="text: label"></span>
    </div>
</div>

Javascript

function FilterBy(name, value, label) {
    this.name = name;
    this.value = value;
    this.label = label;
    this.disabled = ko.observable(false);
    this.checked = ko.observable(false);
}

$(function () {
    var viewModel = {
        priceFilters: ko.observableArray([
        new FilterBy("price0", "0", "All Prices")])
    };

    ko.applyBindings(viewModel);
});

http://jsfiddle.net/paulwilliams0/EYEz2/

我做错了什么吗？我不仅是淘汰赛的新手，而且我对 MVVM 也很陌生。非常感谢

【问题讨论】：

标签： javascript knockout.js ko.observablearray

【解决方案1】：

这里我有你的例子的工作版本：

http://jsfiddle.net/infantrash/hVac2/2/

复选框的数据绑定属性：使用内置绑定 handlers, attr: { id: $index } 没问题，但是值，检查并禁用 are 不应该在大括号中。

为您的功能使用敲除函数，而不是将 jQuery 混入其中。

function viewModel(){
var self = this;
self.priceFilters = ko.observableArray([
    new FilterBy("price0", "0", "All Prices"),
    new FilterBy("price1", "1", "1st Price")
]);


self.checkAllPrices = function(){
    ko.utils.arrayForEach(self.priceFilters(), function(item){
        item.checked(true);
    })
};
self.unCheckAllPrices = function(){
    ko.utils.arrayForEach(self.priceFilters(), function(item){
        item.checked(false);
    })
};

}

我将 viewModel 更改为函数，而不是使用对象字面量表示法，但这只是我的首选方式，如果需要，您可以使用对象字面量表示法。

【讨论】：

非常感谢！！正是我想要的。