KnockoutJS不能从observableArray中删除对象

KnockoutJS cannot delete object from observableArray

本文关键字：删除 对象 observableArray 不能 KnockoutJS      更新时间：2023-09-26

我有以下代码:

var testVM = {
  things: ko.observableArray([
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Orange" },
    { id: 4, name: "Pineapple" },
    { id: 5, name: "Pear" }
    ]),
  deleteThing: function (data) {
    var things = testVM.things;
    var index = things.indexOf(data);
    // Debug...
    console.log('data', data);
    console.log('index', index);
    if (index > -1) {
        things.splice(index, 1)
    }
  },
  deleteApple: function () {
    this.deleteThing({ id: 1, name: "Apple" });
  }
};
ko.applyBindings(testVM);

与HTML:

<ul data-bind="foreach: things">
  <li>
    <a data-bind="click: $root.deleteThing">X</a>&nbsp;|&nbsp;
    <span data-bind="text: name"></span>
  </li>
</ul>
<a data-bind="click: deleteApple">Delete Apple</a>

是我在小提琴中创建的。我遇到的问题是，当从foreach内部的data-bind="click: deleteThing"调用deleteThing函数时工作正常，但是如果(在deleteApple方法的情况下)我试图手动删除一些东西，它永远找不到索引，随后不会从observableArray中删除项目。

我被难住了，因为在这两种情况下console.log显示相同的数据

您遇到的问题与对象引用有关。在你的deleteApple函数中，你传递了一个与原始对象引用不匹配的新对象。

remove API接受一个传递item的函数，在这个函数中你可以返回true/false是否你想要删除这个item。

在observableArray上使用remove示例:

deleteApple: function () {
    this.things.remove(function(item) {
       return item.id === 1 && item.name === "Apple";   
    });
}

更新小提琴:http://jsfiddle.net/rniemeyer/5HPxZ/

原因是您试图删除一个不在数组中的对象:

this.deleteThing({ id: 1, name: "Apple" });

虽然属性值是相同的，但是对象是不同的。对象是引用，你需要正确的引用，即你需要找到项目的索引，然后在该索引处删除:

for(var i = 0;i<testVM.things.length;i++){
    if(testVM.things[i].id === 1){
        things.splice(index, 1);
    }
}

要测试我对引用的意思，试着执行以下代码:

var x = { id: 1, name: "Apple" };
var y = { id: 1, name: "Apple" };
alert(x === y): // Alerts false
相关文章：