KnockoutJS检查绑定问题

Question

我对敲除js还是比较陌生，但是我似乎对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>

Java脚本

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的新手。 非常感谢

Answer 1

在这里，我有您的示例的工作版本：

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

1. 复选框的data-bind属性：使用内置的绑定处理程序，attr：{id：$ index}可以，但是value，checked和disable不应放在大括号中。

2. 为您的功能使用剔除功能，而不是将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更改为函数，而不是使用对象文字符号，但这只是我的首选方式，如果需要，您可以使用对象文字符号。