knockout.js が便利そう

http://knockoutjs.com/

Webアプリで MVVM やりたいなと思ったら、そのままのフレームワーク knockout.js を見つけたのでメモしておく。

MVVM が欲しくなった経緯

サーバー側でのWebページの生成にテンプレートエンジンを使う

これ無しに Webアプリ作るのは無いだろうと思うくらい普通に使う。
あと、最近は、jQuery がかっこいい。

jQuery とか jQueryUI を使ってページ遷移無しに動く Web ページを作る

これも最近は普通に見えるけど、作ろうとしてみると意外と手間がかかる。
動くだけならいいけど、サーバー上のデータを参照したり変更するときにとても手間がかかる。「jQuery には ajax のライブラリあるよ」とか言われても、変更されたり受診した時にビューを更新する処理をたくさん書くことになる。
リッチな機能が提供されている場合は変更結果の見た目も含めて完結した UI を提供してくれるやつも多くて、そういうやつだとあまり手間かからないのだけど、

結果を反映しないといけない部分については、変更したい部分をひとつひとつ把握して置き換える必要がある

「影響範囲をすべて調べて置き換えるコード書くのかよ!面倒だよ!」とか叫びたくなる。
変更したいのはデータだし、ビューに反映させるコードはサーバー側に置いてあるテンプレートに書いたよ。2度も書きたくないよ。
結局、あちこちでページ遷移してサーバー側のテンプレートエンジンに頼る実装になる。

クライアント側で使えるテンプレートエンジンあればいいんじゃないの?

と気づいたので探したらすぐに見つかった。むしろ使うのが一般的なムードさえあった。それでも、

テンプレートエンジン使っても影響範囲は把握しないといけない
テンプレートエンジン使っても更新時に見た目を更新する処理を挟む必要がある

うへぇ。面倒くさい。やっぱりページ遷移して済ませたくなる。

データを変更したら、それを必要とするビューが自動的に更新されてほしい

observer パターンで更新を通知して通知を受けたら自身が持ってるテンプレートで再描画できるモデルを javascript 上に作ればいいのかなー手間かかるなーと悶々とし始めた時に、ふと WPF の MVVM ( Model View ViewModel ) を思い出したので、 "javascript mvvm" とか検索し始めたら、今回の knockout.js が見つかった。