【knockout.js】knockout.jsのMappingプラグインで変更のあったデータを点滅させる方法

この記事は、knockout.js Advent Calendar 2015の24日目です。

qiita.com

knockout.jsのMappingプラグインで変更のあったデータを点滅させる方法を紹介します。

Mappingプラグインでデータを更新する

Mappingプラグインでデータを更新する方法は、以下の記事にありました。

Mapping プラグインではオブジェクトや JSON から新しくモデルを作成する以外にも、既存のモデルに対して値の更新を行うことが出来ます。使い方は fromJS / fromJSON の引数として既存のモデルを渡すだけです。

blog.shibayan.jp

変更されたデータを点滅させる

以下のページを参考に、変更されたデータを点滅させる実装をしました。

jsfiddle.net

動作結果

これで変更されたデータが点滅するはずです。
しかし、動かしてみると、データを更新するたびに全てのデータが点滅してしまいました。

原因

データ更新時に、データのキーを指定していないことが原因でした。

キーの指定方法

以下のデータフォーマットを例とします。

Data":[{"id":"1","name":"佐藤太郎","section":"開発部"},{"id":"2","name":"鈴木太郎","section":"人事部"}]

このようにfromJSの第2引数で、キーを指定します。

var options = {
    "Data" : {
        key: function(data) {
            return ko.unwrap(data.id);
        }
    }
};

ko.mapping.fromJS(newViewModel, options, viewModel);

これで変更されたデータだけが点滅するようになります。