Knockout.js "выбрать все" флажки

Я только начал играть с 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 работает некорректно. Я новичок в этой парадигме программирования JavaScript OO, поэтому я могу делать что-то явно неправое.

Спасибо!

Ответ 1

баннеры - это массив в этом случае, поэтому вам нужно будет получить доступ к каждому элементу в массиве и обновить индивидуальные свойства isSelected.

Что-то вроде:

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