Question

我试图将knockout.js与ES5插件一起使用，但我无法从阵列中删除它。

它似乎有点工作，你可以删除，但数组中总有一个项目，但不是真的不知何故。我完全不知道为什么这样做并不像你认为的那样。

我做错了什么？

（我有一个更复杂的场景，正在使用一个durandal小部件，但我能够把它归结为这个，所以我认为es5插件是罪魁祸首）

这是我的标记：

<div data-bind="foreach: staffList" style="border:1px solid black;">
    <div style="border: 1px solid red;">
        <p data-bind="text: Name"></p>
        <p>
            <button data-bind="click: deleteClickHandler">Delete</button>
        </p>
    </div>
</div>

和脚本：

function ctor(){
  var self=this;
  self.staffList = [{Name:'one'},{Name:'two'},{Name:'three'},{Name:'four'}];
  ko.track(self.staffList, { deep: true });
  self.deleteClickHandler = function (obj) {
    //TODO show confirm dialog first
    var index = self.staffList.indexOf(obj);
    if (index >= 0) {
      self.staffList.splice(index, 1);
    }
  };
}
ko.applyBindings(ctor);

现实世界中只有其他区别在于我从API调用中获取数据，但行为是相同的。

Answer 1

嵌套在foreach循环中的按钮 neads以引用父级，因此

<button data-bind="click: $root.deleteClickHandler">Delete</button>

而不是

<button data-bind="click: deleteClickHandler">Delete</button>

我刚测试了这个，发现视图中没有列出剩余的项目。这应该可以解决您所看到的问题，因为我在删除最后一项后会看到一个空数组。

另外，我必须将 ko.applyBindings 调用更改为ko.applyBindings(new ctor());并删除 ko.track 调用，以支持正常的可观察数组 staffList 对象。除非有特殊原因你不能使用observableArray？

JSFiddle Example

Answer 2

有趣的问题。我还不确定根本原因，但我确实设法找到一种方法让它发挥作用。我需要做一些改变：

让ctor成为真正的构造函数/使用它;
由于上一点，您需要引用具有特定范围的deleteClickHandler;
跟踪self，而不仅仅是一名成员;

这是works对我来说的样本：

<div data-bind="foreach: staffList" style="border:1px solid black;">
    <div style="border: 1px solid red;">
        <span data-bind="text: Name"></span>
        <button data-bind="click: $root.deleteClickHandler">Delete</button>
    </div>
</div>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

function ViewModel(){
  var self = this;
  self.staffList = [{Name:'one'},{Name:'two'},{Name:'three'},{Name:'four'}];
  ko.track(self);
  self.deleteClickHandler = function (obj) {
    var index = self.staffList.indexOf(obj);
    if (index >= 0) {
      self.staffList.splice(index, 1);
    }
  };
}
ko.applyBindings(new ViewModel());

此外，我想提及这也是可能的：

  self.deleteClickHandler = function (obj) {
    self.staffList.remove(obj);
  };

同样，我不确定为什么ko.track(self.staffList)无效，但上述情况至少可以帮助你。

使用knockoutjs es5从数组中删除项目

2 个答案: