0

我对 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 也很陌生。非常感谢

4

1 回答 1

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 更改为一个函数，而不是使用对象文字表示法，但这只是我的首选方式，如果需要，您可以使用对象文字表示法。

于 2013-05-08T16:01:01.190 回答