再帰的に ko.track する

複雑な構造の ViewModel を knockout.es5 で扱う際、再帰的によろしくやってくれるものがないため作成してみました。

なにはともあれ、オブジェクトのプロパティが knockout.js の Observable になっているだけなのか、knockout-es5 の ko.track が当たってるのか分かりにくいので、デバッグ用の関数を作っておきます。

複数の状態を配列で返却するのは甘えな気がしますが、デバッグ用ということで許していただきたいです。まずは ko.track の結果ですね。やはり第一引数で渡したオブジェクトのプロパティのみが対象です。その中身は見てくれません。

ついでなので、ko.track({deep: true}) についても調べてみましょう。残念ながら配列の中のオブジェクトは適用範囲外です。

大した内容でもないのに引っ張ってしまいましたが、再帰的に適用するコードを載せます。

上を使用して試した結果が以下です。配列内も track してくれてます。

ひとまずはこれで可能な限り observable なプロパティにできるようになりました。次はこれを使用した上で、ViewModel の変更が View 側にも適切に反映されるか確認する必要がありそうです。

最後に、ko.mapping という普通の observable を再帰的に適用できるプラグインがあるので、こちらの挙動も見てみました。

こちらはこちらで、オブジェクトの入れ子は observable ではないですが、入れ子オブジェクト内の文字列が入っているプロパティは observable になるという結果に。何が正しいのか分からなくなってきますね。

全部 observable にすると速度が落ちそうなので、再帰的に変換するのはあきらめて ko.valueHasMutated(viewModel, ‘prop’) と組み合わせて使う方がよいのかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください