knockout.js - KnockoutjsObservableArrayを使用して追加または削除された要素を特定します

Question

KnockoutobservableArrayから削除された要素を特定する必要があります。私のjsFiddleをご覧ください。

変更をサブスクライブできますが、値を返すだけです。これは、追加または削除後の現在の配列です。

self.selectedDataPointOptions.subscribe(function(value) {
  // how can I see which one was added or removed?
  alert(value);
});

Answer 1

ノックアウトには、ko.utils.compareArraysある配列を別の配列と比較するために使用できるものが含まれています。配列に追加または削除された各項目を通知するヘルパー関数を次に示します。

ko.observableArray.fn.subscribeArrayChanged = function(addCallback, deleteCallback) {
    var previousValue = undefined;
    this.subscribe(function(_previousValue) {
        previousValue = _previousValue.slice(0);
    }, undefined, 'beforeChange');
    this.subscribe(function(latestValue) {
        var editScript = ko.utils.compareArrays(previousValue, latestValue);
        for (var i = 0, j = editScript.length; i < j; i++) {
            switch (editScript[i].status) {
                case "retained":
                    break;
                case "deleted":
                    if (deleteCallback)
                        deleteCallback(editScript[i].value);
                    break;
                case "added":
                    if (addCallback)
                        addCallback(editScript[i].value);
                    break;
            }
        }
        previousValue = undefined;
    });
};

ここで実際に動作しています：http://jsfiddle.net/mbest/Jq3ru/

Knockout 3.0 以降では、arrayChangeイベントを使用してこれをより簡単に行うことができます。詳細はこちら: http://blog.stevensanderson.com/2013/10/08/knockout-3-0-release-candidate-available/

Answer 2

提案されたソリューションはクールで機能しますが、変更があるたびに配列を複製し、比較を行う必要があります。これはおそらく O(n^2) です。

ここに別の解決策があります: 別のjsファイルを含めることを意味します...しかし、パフォーマンスを向上させたい場合は、これが提供されます:

https://github.com/bobwold/betterObservableArray

この observableArray の置き換え (基本的には監視可能な配列の単なるクローンであり、いくつかの追加コードがあります) は、ノックアウト サブスクリプション フレームワークを使用し、「追加」および「削除」サブスクリプションを追加します。

サンプル使用法:

var presidents = ko.betterObservableArray();
presidents.subscribe(presidentAdded, this, "add");
presidents.subscribe(this.presidentRemoved, this, "remove");

...

function presidentAdded(president) {
};

function presidentRemoved (president) {
};

...

Answer 3

Michael Best のソリューション (subscribeArrayChanged) は、私にとっても非常にうまく機能します。しかし、typescript から使用する必要があるため、typescript ソース コードで快適に使用するために、元の 'knockout.d.ts' とは別のソースに、少し定義したソース (d.ts) を作成しました。

カスタムの knockoutext.d.ts ファイル:

/// <reference path="knockout.d.ts" />
interface KnockoutObservableArray<T> extends KnockoutObservableArrayFunctions<T> {
    subscribeArrayChanged(addCallback: (T) => void , deleteCallback: (T) => void );
}

小さなサンプル コード スニペット:

data[0].Properties.subscribeArrayChanged(
    (value: Meta.Data.Property) => {
        console.log('add callback called');
    },
    (value: Meta.Data.Property) => {
        console.log('delete callback called');
    }
);