KnockoutJS：使用复选框和一个删除按钮删除多个项目答案

【问题标题】：KnockoutJS: Delete multiple items using checkbox and one delete buttonKnockoutJS：使用复选框和一个删除按钮删除多个项目
【发布时间】：2013-08-13 13:04:24
【问题描述】：

我正在使用 knockout.js 和 sammy.js 开发单页应用程序。

我知道如何通过将带有 click 事件的按钮附加到每个项目来删除一个项目，如下所示：

self.deleteItem = function(item) {
    self.array.remove(item);
}

我试图弄清楚如何使用复选框同时删除多个项目。

有人能指出我正确的方向吗？

谢谢！

【问题讨论】：

标签： javascript knockout.js sammy.js

【解决方案1】：

您可以通过将新数组添加到您的虚拟机来存储选定的行来实现这一点。使用checked绑定将其绑定到复选框：

function ViewModel() {
    var self = this;

    self.items = ko.observableArray(["One", "Two", "Three"]);
    self.selectedItems = ko.observableArray();

    self.deleteSelected = function () {
        self.items.removeAll(self.selectedItems());
        self.selectedItems.removeAll();
    }
}

ko.applyBindings(new ViewModel());

<div data-bind="foreach: items">
    <input type="checkbox" data-bind="value: $data, checked: $parent.selectedItems" />
    <span data-bind="text: $data"></span>
    <br/>
</div>
<input type="button" value="Remove Selected" data-bind="click: deleteSelected" />

这里是一个例子：http://jsfiddle.net/zvFnW/

【讨论】：

谢谢！当我尝试实现您的代码并单击一个复选框时，它会检查所有复选框。我究竟做错了什么？它在我的小提琴中有效，但由于某种原因无法生存。 jsfiddle.net/ismailp/zvFnW/2
很难说。尝试在小提琴中重现它。是不是忘了给复选框加值：$data？
也许我没有得到你的问题。你能澄清一下什么不起作用吗？
当我点击一个复选框时，所有项目都会被选中！我有 vale: $data 附加！
您的脚本只有在 observableArray 看起来像这样的情况下才有效：{"One", "Two", "Three"}。请检查我的小提琴与一个似乎不起作用的案例的例子。 jsfiddle.net/ismailp/zvFnW/4。我在这里错过了什么？