2

小提琴

我正在尝试将 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 调用中获取数据，但行为是相同的。

4

2 回答 2

0

嵌套在 foreach 循环中的按钮需要引用父级，所以这将是

<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 示例

于 2016-04-20T19:31:38.993 回答
0

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

  • 制作ctor一个真正的构造函数/这样使用它；
  • 由于前一点，您需要参考deleteClickHandler特定范围；
  • 跟踪self，不只是一个成员；

这是一个适合我的示例：

<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)不起作用，但以上至少可以让您继续前进。

于 2016-04-20T19:36:49.073 回答