CoffeeScriptとKnockout.jsのサンプル

JavaScriptのMVVMフレームワークKnockout.js」を使ってみました。

Knockout.jsを選んだ理由

深い理由はないですw

双方向バインディングがイメージしやすく、ライブラリ自体が軽量で他のライブラリに依存しないので、シンプルでわかりやすい印象を受けたからです。

作ってみた

サイバーエージェント公式ブログの吉川さんの記事」のJavascriptを見本に、CoffeeScriptで書きました。

作ったのは、入力値の変更によって動的に表示ラベルを変更するEchoと、名前の追加、削除だけを行うAddressBookです。Echoの方はフォームの値が空の場合、エラーメッセージを表示するバリデーションつき。リポジトリhttps://github.com/tq-jappy/knockout-coffee にあります。

Knockout.jsの肝になるバインディングには大きく分けて3種類があるようですが、このEchoとAddressBookでそれぞれの代表的なものをカバーしています。

ここで各々の説明は省きますが大きく分けて3つの種類にカテゴライズされています
・見た目をバインディング(text、visible等)
・繰り返し処理、分岐処理をバインディング(foreach、if等)
・押下、入力などの操作・入力処理をバインディング(click、checked等)

http://ameblo.jp/ca-1pixel/entry-11298459074.html

Knockout.jsはCoffeeScriptでも問題なく使えそうですね。言語としてクラスがカバーされているので、Model, ViewModelをクラスとしてそれぞれきちんと定義できるので、すっきりと開発できそうです。

Tips: 複数のバインディングを利用する

ko.applyBindingsの2つ目の引数に対象のDOMを指定することで、異なるViewModelを適用できます。

main.coffee

$ ->
    ko.applyBindings(new EchoViewModel(), $("#echo")[0])
    ko.applyBindings(new AddressBookViewModel(), $("#addressBook")[0])

Tips: clickをバインディングしている要素を取得

View

  <li foo="xxx" data-bind="click:hoge"></li>

ViewModel

  hoge: (obj, e) =>
    console.log $(e.target).attr("foo") # --> xxx

追記

HTML5 Canvasアプリの方もKnockout.jsを導入しました。

追加するアイテムを選択するパネルのところだけバインディングを行うようにしました。おかげでソースもその部分に関してはコンパクトになったし、アイテムの種類を追加するのもモデルを一箇所変更するだけでよくなったので、メンテナンス性も上がった気がします。