Knockout.js"全选"复选框

Question

我刚开始玩Knockout.js,看起来真的很酷.我有一个网格.此网格有一个列,顶部有一个复选框,用于"选择所有"元素,以及取消选择.标准网格行为.

到目前为止,这是我的代码:

使用Javascript:

// Define a "banner" class
function banner(inventory, name, artType, artSize) {
    return {
        isSelected : ko.observable(false),
        inventory : ko.observable(inventory),
        name : ko.observable(name),
        artType : ko.observable(artType),
        artSize : ko.observable(artSize)

    };
}

var viewModel = {
    banners : ko.observableArray([new banner("network", "Banner #1"), new banner("oo", "Banner #2")]),
    addBanner : function() {
        this.banners.push(new banner("network", "Banner"));
    },
    selectAll : function() {
        this.banners.isSelected(true)
    }       

};

ko.applyBindings(viewModel);

我将"selectAll"事件绑定到这样的复选框:

<th><input data-bind="click: selectAll" type="checkbox" /></th>

对于我列表中的每个横幅,他们的复选框如下所示:

<td><input data-bind="checked: isSelected" type="checkbox" /></td>

由于某种原因,我的selectAll功能无法正常工作.我对这个OO javascript编程范例相当新,所以我可能会在这里做一些明显错误的事情.

谢谢!

Answer 1

在这种情况下,banners是一个数组,因此您需要访问数组中的每个项目并更新单个isSelected属性.

就像是:

ko.utils.arrayForEach(this.banners(), function(banner) {
   banner.isSelected(true);
});