我正试图让我的头围绕着淘汰赛中的观察者! 但是,我在可观察数组上实现remove函数时遇到问题。
我的js如下:
$(function () {
var data = [{ name: "name1" }, { name: "name2" }, { name: "name3"}];
var viewModel = {
namesList: ko.observableArray(data),
nameToAdd: ko.observable("name4"),
myCustomAddItem: function () {
this.namesList.push({ name: this.nameToAdd() });
},
myCustomRemove: function () {
console.log("before + " + this.nameToAdd());
this.namesList.remove(this.nameToAdd());
console.log("after + " + this.nameToAdd());
}
};
ko.applyBindings(viewModel);
});
我的html是:
Name To add/remove <input type="text" data-bind="value: nameToAdd, valueUpdate: 'afterkeydown'"/>
<ul data-bind="template: {name: 'listTemp1', foreach :namesList}">
</ul>
<p>
<button data-bind="click: myCustomAddItem">Add Item</button>
<button data-bind="click: myCustomRemove">Remove Item</button>
<script id="listTemp1" type="text/html">
<li data-bind="text:name"> </li>
</script>
</p>
我的myCustomAddItem工作正常,但不是myCustomRemove。我也在this.namesList.remove(this.nameToAdd());
之前和之后放了一个console.log,看看那里有什么不对,但我看不到任何错误。当我单击“删除项目”按钮时,firebug控制台会显示日志,但项目未从列表中删除。
任何帮助表示赞赏
答案 0 :(得分:7)
remove
的参数应该是一个函数,它返回true或false是否删除某些东西。
它与filter
函数非常相似。
在你的情况下,这样的事情应该有效:
myCustomRemove: function () {
console.log("before + " + this.nameToAdd());
var nameToAdd = this.nameToAdd();
this.namesList.remove(function(item) {
//'item' will be one of the items in the array,
//thus we compare the name property of it to the value we want to remove
return item.name == nameToAdd;
});
console.log("after + " + this.nameToAdd());
}
答案 1 :(得分:3)
[这应该是对Jani答案的评论,但我还是不能评论其他帖子,抱歉] 只是一个小小的澄清:从技术上讲,您可以调用remove()传递要删除的元素,请参阅http://knockoutjs.com/documentation/observableArrays.html上的“删除并删除所有”部分。
你的代码的问题是'data'数组中的元素是对象(包含一个名为'name'的属性),你要求从数组中删除字符串“name4”(或者'nameToAdd'包含的任何内容)。
您可能想要创建一个要传递的新对象,如下所示:
// old code
//this.namesList.remove(this.nameToAdd());
this.namesList.remove({ name: this.nameToAdd() });
但这仍然失败,因为javascript对象平等的工作方式(例如:参见:How to determine equality for two JavaScript objects?)。
所以,最后你需要使用这个功能。
在这个简单的例子中,您还可以将'namesList'数组转换为简单的字符串数组,并在模板中绑定“$ data”。见http://jsfiddle.net/saurus/usKwA/。 在更复杂的情况下,也许你无法避免使用对象。
答案 2 :(得分:0)
[observableArray] .remove(function(item){return item。[whatever] == [somevalue];});