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

时间:2013-08-12 09:10:15

标签: javascript knockout.js sammy.js

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

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

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

我正在试图找出如何使用复选框同时删除多个项目。

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

谢谢!

1 个答案:

答案 0 :(得分:4)

您可以通过向vm添加新数组来存储选定的行来实现此目的。使用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/