Knockout.js チュートリアルのメモ：Single page applications

Step 1

最近のモダンでレスポンシブなWeb UIはSingle Page Applicationに向かっている。Single Page Applicationでは戻る/進むのサポートのためにhushベースまたはpushStateによるナビゲーションを使っている。

$dataはおそらくそのコンテキストでの対応するデータを参照する。例では、foreachで文字列のobservableな配列を列挙しているため、$dataは文字列そのものとなる。data-bind属性ではcssも制御できる。

Step 2

jQueryの$.getのコールバックにobservableなプロパティを指定することで、$.getで取得されたデータがobservableなプロパティにセットされる => 変更が通知されてビューが更新される、という流れになっている。うまいことできてる。

withバインディングはバインディングコンテキストを変更する。これにより、毎回プロパティを指定する手間が省ける。

Step 3

withバインディングで指定したプロパティがnullのときは対応する要素自体が表示されないようだ。

htmlバインディングは値をHTML要素としてビューに反映する。

Step 4

クライアントサイドのナビゲーションを実現するためのライブラリは沢山あるが、今回はsammy.jsというライブラリを使用する。Step 2で何の説明もなく出てきたjQueryもそうだけど、Knockout.js自体がシンプルにバインディングに特化している分、いろんなライブラリと組み合わせやすいようだ。逆に言えば、色んなライブラリを組み合わせないと他の全部入りクライアントサイドMVCフレームワークのようにはいかないということになりそうだ。ここらへんは人・組織によって好みが分かれるところだと思う。

コードを見る限り、sammy.jsはマッチするルートの処理を書けばあとは良しなにやってくれるようだ。あと、JavaScriptの「thisが何を指すかわかりにくい問題」に対応するために特に説明もなく導入されていたvar self = this;が、地味に重要な役割を果たしている。

Step 5

自分でDOM処理を書くことなく、よりきれいで簡単にクライアントサイドナビゲーションを実現できた。

今回はKnockout.jsを静的データに対するテンプレートシステム的に使用した。もちろん静的データに対してしか使えないということはない。Knockout.jsには、さまざまなreal worldのシナリオに対応するための豊富な機能がある。