Question

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

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

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

Answer 1

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

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

复选框的数据绑定属性：使用内置绑定处理程序，attr：{id：$ index}没问题，但值，检查和禁用不应该在大括号中。

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

KnockoutJS检查了绑定问题

1 个答案: