ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2