JavaScriptのMVVMフレームワーク「Knockout.js」を使ってみました。
作ってみた
「サイバーエージェント公式ブログの吉川さんの記事」のJavascriptを見本に、CoffeeScriptで書きました。
作ったのは、入力値の変更によって動的に表示ラベルを変更するEchoと、名前の追加、削除だけを行うAddressBookです。Echoの方はフォームの値が空の場合、エラーメッセージを表示するバリデーションつき。リポジトリは https://github.com/tq-jappy/knockout-coffee にあります。
Knockout.jsの肝になるバインディングには大きく分けて3種類があるようですが、このEchoとAddressBookでそれぞれの代表的なものをカバーしています。
ここで各々の説明は省きますが大きく分けて3つの種類にカテゴライズされています
http://ameblo.jp/ca-1pixel/entry-11298459074.html
・見た目をバインディング(text、visible等)
・繰り返し処理、分岐処理をバインディング(foreach、if等)
・押下、入力などの操作・入力処理をバインディング(click、checked等)
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