2013-08-12 95 views
3

我正在使用knockout.js和sammy.js开发单页应用程序。KnockoutJS:使用复选框和一个删除按钮删除多个项目

我知道我可以通过与click事件附加按钮,每一个项目,像这样删除一个项目:

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

我试图找出我如何可以使用复选框以删除多个项目同一时间。

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

谢谢!

回答

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/

+0

感谢这个!当我尝试实现你的代码并点击一个复选框时,它会检查所有复选框。我究竟做错了什么?它在我的小提琴中奏效,但由于某种原因而不能活着。 http://jsfiddle.net/ismailp/zvFnW/2/ – Ismailp

+0

这很难说。尝试在小提琴中重现它。你不忘记增加价值:$数据复选框? –

+0

也许我没有得到你的问题。你能否澄清一下哪些行不通? –