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 编程范例相当陌生，所以我可能在这里做了一些明显错误的事情。
谢谢！
I've just started playing around with Knockout.js, and it seems really cool. What I have is a grid. This grid has a column with a checkbox at the top to "select all" of the elements, as well as deselect. Standard grid behavior.
Here's my code so far:
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);
I'm binding the "selectAll" event to the checkbox like this:
<th><input data-bind="click: selectAll" type="checkbox" /></th>
And for each individual banner I have in my list, their checkbox looks like this:
<td><input data-bind="checked: isSelected" type="checkbox" /></td>
For some reason my selectAll function isn't working correctly. I'm fairly new to this OO javascript programming paradigm, so I may be doing something blatantly wrong here.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在这种情况下，banners 是一个数组，因此您需要访问数组中的每个项目并更新各个 isSelected 属性。
像这样的东西：
banners is an array in this case, so you would need to access each item in the array and update the individual isSelected properties.
Something like:
下面的链接有更多功能响应。当取消选择其他复选框时，它会取消选择“全选”框：
knockout check/取消选中所有组合框
There's a more functional response at the link below. It deselects the "select all" box when on of the other checkboxes are deselected:
knockout check/uncheck all combo box