javascript – Knockout.js“全选”复选框

前端之家收集整理的这篇文章主要介绍了javascript – 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函数无法正常工作.我对这个OO JavaScript编程范例来说是相当新鲜的,所以我可能会在这里做出明显的错误.

谢谢!

解决方法

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

就像是:

ko.utils.arrayForEach(this.banners(),function(banner) {
   banner.isSelected(true);
});
原文链接:https://www.f2er.com/js/154629.html

猜你在找的JavaScript相关文章