Javascript 敲除js移除不起作用
我正试着在击倒js中让我的头绕过可观察物! 然而,在可观测数组上实现remove函数时,我面临一个问题 我的建议如下:Javascript 敲除js移除不起作用,javascript,knockout.js,Javascript,Knockout.js,我正试着在击倒js中让我的头绕过可观察物! 然而,在可观测数组上实现remove函数时,我面临一个问题 我的建议如下: $(function () { var data = [{ name: "name1" }, { name: "name2" }, { name: "name3"}]; var viewModel = { namesList: ko.observableArray(data), nameToAdd: ko.observable("
$(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.removethis.nameToAdd前后放了一个console.log;看看有没有什么问题,但我看不出有什么错误。当我单击Remove Item按钮时,firebug控制台会显示日志,但该项并未从列表中删除
要删除的参数应该是一个函数,该函数在是否删除某些内容时返回true或false
它的工作原理与函数非常相似
在您的情况下,类似这样的方法应该会起作用:
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());
}
[这应该是对Jani answer的评论,但我仍然无法对其他帖子发表评论,抱歉] 只是一个小小的澄清:从技术上讲,您可以调用remove来传递要删除的元素,请参阅第remove和removeAll部分 代码的问题是,“data”数组中的元素是包含名为“name”的属性的对象,您要求从数组中删除字符串name4或“nameToAdd”包含的任何内容 您可能会尝试创建一个要传递以删除的新对象,如下所示:
// old code
//this.namesList.remove(this.nameToAdd());
this.namesList.remove({ name: this.nameToAdd() });
但这仍然失败,因为javascript对象相等的工作方式请参见,例如:
因此,最终还是需要使用该函数
在这个简单的示例中,还可以将“namesList”数组转换为字符串的简单数组,并在模板中绑定$data。看见
在更复杂的场景中,可能无法避免使用对象。[ObservalArray].removefunctionitem{return item.[Whather]=[somevalue];} 感谢您的详细评论。这确实有助于了解目前的情况: