knockout.jsことはじめ

gistfile1.md

knockout.jsの基本

まずknockout.jsを読み込もう。

<script type='text/javascript' src='knockout-2.2.1.js'></script>

他のライブラリに依存していないので、これ単体で使用することができる。
jQueryと一緒に使うこともできるのでおすすめ。

テキストを代入

Today's message is: <span data-bind="text: myMessage"></span>
 
<script type="text/javascript">
var viewModel = {
    myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears

ko.applyBindings(viewModel); // init
</script>

上記を実行すると、data-bindのtextを指定している要素に”Hello, world!”という値が入ります。
myMessageをko.observableで初期化したことで、knockoutの監視対象になっています。

直接テキストの値を変えてみましょう。
viewModelはグローバル変数として定義されているので、Chromeのコンソールから直接値を変更できます。

viewModel.myMessage("Hello, Knockout!");

代入と同時にHTMLの値が変更されたでしょう。
これの強力さを示すために、data-bind="text: myMessage"を色んなところに入れてみましょう。
この状態でコンソールから直接を値を変更すると、もちろんすべての要素が同時に変更されます。

これがデータバインディングの素晴らしさです。
DOMとの橋渡しをKnockoutがすべて行なってくれるので、開発者はモデルの扱いに注意を払うだけでよくなります。
マークアップ側と作業を分担することもできるでしょう。
余計なテンプレートを挟む必要もなくなるので、デザイナーのコードを無闇にいじくる必要も無くなるます。