Knockout.jsを触ってみた所感

gyazo.com

Knockout.jsとは

• Microsoftが作ったMVVMパターンのJavaScriptフレームワーク
• Windows Azureポータルにも使われているらしい
• 日本語ドキュメント

kojs.sukobuto.com

Knockout.jsのココがスゴい

• みんな大好きjQueryと共存できるMicroSoft謹製のJavaScriptライブラリ
• MVVM（Model-View-ViewModel）
• DOMがいじりたい放題、何でもできちゃう。きっと魔法(かに思われた)。
• 依存トラッキング
  • データモデルの変更をトリガーにできる
• 宣言型バインディング
  • データモデルとUIを関連づけてバインディングする
• 拡張性
  • バインディングの仕組みが容易
  • データモデルを用意してDOMにバインディングするだけ

Knockout.jsのココが地獄

• jQueryのonclickなどとごちゃまぜになって、何がトリガーになってるか追うのが困難
• データモデルが更新されることがトリガーになるため予想外のタイミングで発火してビビる
• 参考文献が公式wikiしかない
• データモデル用意してDOMと紐づけるだけで簡単に実装できてしまうので、オレオレ実装になりがち
• 「jQueryでよくね？」思考がありえてしまって、結局jQueryへの依存度が高いままになる
• マイナー技術過ぎて覚えても活かす環境がまずない
• 現場で導入しても引継ぎコストが高くつく（と思う）

宣言型バインディング

• data-bind属性はHTML4標準ではないが、解釈されない属性は無視される
• ko.applyBindings(myViewModel) をHTMLの最下部に記載し、knockout.jsを作動させる

<span data-bind="text: hoge"></span>
<script>ko.applyBindings(model);</script>

observable関数

• データモデルのプロパティをobservableとして定義する
• observableで定義されたプロパティが変更されるとsubscribeで変更を検知できる

 // 変更の検知をしない場合
  var model {
    huga : "huga"
   }; 
  // 監視可能なプロパティを定義
  var observableModel {
    hoge: ko.observable("hoge")
   };

subscribe関数

　データモデルが変更された場合のイベントハンドラを設定できる

  // データモデルを定義
  var model = {
     hoge: ko.observable("hoge")
  }
  // hogeの値が変更される度動く処理
  model.hoge.subscribe(function (value){
    alert("hogeは" + value + "に更新されました");
  )};