KnockoutはMVVM（Model-View-View Model）を実現するJavaScriptライブラリ。

MOONGIFTはこう見る

MVVMの概念についてはこちらの記事を参照のこと。それをJavaScriptで実現したのがKnockoutと言える。WebアプリケーションとMVVMを組み合わせると非常にデータ操作が便利に使いやすくなりそうだ。data-bindの書き方は最初は慣れないかも知れないが、見た目の理解はしやすいと思う。

ショッピンカートのようなシステムの他、Twitterクライアントのサンプルもある。何よりデータの追加、削除がリアルタイムに反映されるのが便利で良い。

KnockoutはJavaScript製のオープンソース・ソフトウェア。MVVMとはModel-View-View Modelの略で、ViewとModelの間にView Modelというものを挟み込む。View ModelにはViewに関連するプロパティを実装する。ViewModelはViewとModelを疎祖結合にできるメリットがある（違っていたら指摘してほしい）。

Screen-shot 11.png

リスト編集を行うデモとそのコード

　

元々のネタがWPF（Windows Presentation Foundation）から出ているらしく、イベントドリブンな開発向きに考えられているもののようだ（これまた違ったら指摘してほしい）。だがそのMVVMをWebベースで可能にするのがKnockoutだ。

Knockoutのコードを見ると非常に面白い。HTMLではdata-bindというものを定義する。そこにはアクションであったり、オブジェクトの名前を定義する。そしてJavaScript側でそのオブジェクトに対して値をセットしたり、アクションを実行できるようにするのだ。

Screen-shot 12.png

Twitterクライアントのデモ

　

リストをHTML上で修正したり、リスト上の値が別なオブジェクトと関連する（価格のリストを集計する等）場合に威力を発揮する。リアルタイムでデータが連携する。さらにテンプレートにも対応している。MVVMを言葉で定義されてもなかなか理解に難しいが、Knockoutを見れば腑に落ち、興味を持てるのではないだろうか。

　

デモ

　http://knockoutjs.com/examples/

[/s2If]

Knockout : Home

　http://knockoutjs.com/