淘汰赛js删除不起作用

我试图让我的头在淘汰赛js周围观察！但是，我正面临着在可观察数组上执行remove函数的问题。淘汰赛js删除不起作用

我的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，以查看是否有任何错误，但是在那里我看不到任何错误。当我点击“删除项目”按钮时，萤幕控制台会显示日志，但该项目并未从列表中移除。

任何帮助表示赞赏

来源

2011-12-30 CjCoax

到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()); 
}

来源

2011-12-30 13:19:03

[这应该是贾尼答案评论，但我仍然不能评论别人发布，抱歉] 只是一个小的澄清：从技术上讲，您可以调用remove（）传递元素以移除元素，请参阅http://knockoutjs.com/documentation/observableArrays.html上的“remove和removeAll”部分。你的代码的问题是'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/。在更复杂的情况下，也许你不能避免使用对象。

来源

2011-12-30 17:10:53 saurus

感谢您的详细评论。它真的有助于了解现在发生了什么:) – CjCoax 2011-12-30 22:13:52

[observableArray] .remove（function（item）{return item。[whatever] == [somevalue];}）;

来源

2012-06-19 09:48:09 jwize

淘汰赛js删除不起作用

回答

相关问题