淘汰赛js删除不起作用答案

【问题标题】：knockout js remove does not work淘汰赛js删除不起作用
【发布时间】：2012-01-30 12:32:57
【问题描述】：

我正试图了解淘汰赛 js 中的 observables！但是，我在可观察数组上实现删除函数时遇到了问题。

我的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 控制台会显示日志，但该项目并未从列表中删除。

任何帮助表示赞赏

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

[这应该是对 Jani 答案的评论，但我仍然无法评论其他帖子，抱歉] 只是一个小说明：从技术上讲，您可以调用 remove() 传递要删除的元素，请参阅http://knockoutjs.com/documentation/observableArrays.html 上的“remove and 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/。在更复杂的场景中，你可能无法避免使用对象。

【讨论】：

感谢您的详细评论。这真的有助于了解现在发生的事情:)

【解决方案3】：

[observableArray].remove(function(item) { return item.[whatever] == [somevalue] ; } );

【讨论】：