Knockout.js チュートリアルのメモ：Working with Lists and Collections

Step 1

ko.observableArrayでobservableな配列を作成できる。observableな配列は要素の追加、削除についてobservableになっている。data-bind属性で子要素の繰り返しに指定するforeachはcontrol flow バインディングの一種。ほかにはifやwhichなどがある。

Step 2

observableな配列へaddで要素を追加すると、対応するビューの要素も更新される。ビューに対しては全体を再描画するのではなく最小限のDOM更新で済ませるので、スケールするし、低性能のデバイスでも動作する。

Step 3

'options'バインディングで特定の値からの選択をバインディングできる。observableな配列の各要素について、observableなプロパティについてはその変更も監視される。逆に、observableでないプロパティについては変更は監視されないため、編集しても対応するビューの要素は更新されない。

Step 4

$rootはトップレベルのビューモデルを参照する。例のような行単位の削除は、各行に対応するオブジェクトではなくそのオブジェクト配列を管理するビューモデル側に処理を持たせることですっきりする。ko.computedはobservableな配列についてもしっかり計算できる。visibleバインディングは要素の表示非表示を、observableなプロパティを監視して制御する。

Step 5

MVVMな構造にすることで、簡単できれいに表示/状態/処理を連動させることができる。enableバインディングを使えば、条件によって活性/非活性を制御できる。