Knockout.js チュートリアルのメモ:Introduction

Knockout.jsのチュートリアルをやってみたので、その記録を残しておく。

Step 1

ビューの要素にdata-bind属性を付けると、ビューモデル => ビューのバインディングができる。ビューとビューモデルのバインディングについてはまだわからない。

Step 2

ko.observableでobservableを生成できる。ビューモデルのプロパティをobservableにすることで、双方向バインディングになる。

Step 3

observableなプロパティの値から何らかの計算をして別のプロパティとすることができる。このようなプロパティをcomputedプロパティとする。ko.computedに計算を渡すことで生成できる。計算内部で使用したobservableプロパティの変化に反応してcomputedプロパティも変化する。

Step 4

observableなプロパティはコードからも値の取得・設定ができる。

Step 5

Knockout.jsを使うことで、

  • ビューの状態を保持するデータをきれいでオブジェクト指向にのっとった形で書ける
  • 宣言的にビューを書ける
  • 「どうやってビューモデルに合わせてビューの状態を変えるか(また、その逆)」をフレームワークが面倒見てくれる