2

フィドル

ES5 プラグインで knockout.js を使用しようとしていますが、配列からの削除を機能させることができません。

いくらか機能しているように見えますが、削除できますが、配列には常に1つのアイテムが残っていますが、実際にはそうではありません。なぜこれがあなたが思うように機能しないのか、私は完全に混乱しています。

私は何を間違っていますか？

(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.track呼び出しをko.applyBindings(new ctor());削除して、 staffListオブジェクトの通常の監視可能な配列を使用する必要がありました。特定の理由がない限り、observableArray を使用できませんか?

JSFiddle の例

于 2016-04-20T19:31:38.993 に答える