Knockout入門

knockout.jsって?

データバインド機能を提供するJSライブラリです。
http://knockoutjs.com
非常に軽量で、皆大好き?jQueryと競合しません。
公式サンプルが充実しているので、取っ付きやすいです。

knockout.jsを使ってみる

knockout.jsのダウンロード

http://knockoutjs.com/downloads/index.htmlからダウンロードします。

ViewModelをViewにバインドしてみる

Knockoutではko.applyBindingsでViewにViewModelをバインドさせます。

ViewModel

var viewModel = {
    msg: "Hello Knockout World!"
};
ko.applyBindings(viewModel);

ViewでViewModelのプロパティを表示してみます。

View

<html>
    <head>
        <script type="text/javascript" src="knockout-3.0.0.js"></script>
    </head>
    <body>
        <div data-bind="text: msg"></div>
    </body>
</html>

Hello Knockout World!と表示されます。

ViewModelの更新をViewに伝えてみる

更新するプロパティをobservableとします。
プロパティを取得するには引数なしのobservableを呼びます。 プロパティを更新するには、引数に新しい値を入れobservableを呼びます。

ViewModel

var viewModel = {
    clickedCount: ko.observable(0)
};
ko.applyBindings(viewModel);

window.onclick = function(){
    var cnt = viewModel.clickedCount() + 1;
    viewModel.clickedCount(cnt);
}

View

<html>
    <head>
        <script type="text/javascript" src="knockout-3.0.0.js"></script>
    </head>
    <body>
        Clicked Count: <span data-bind="text: clickedCount"></span>
    </body>
</html>

クリックされたらクリック数が増えていきます。

最後に

以上、簡単ではありますがknockout.jsを紹介しました。
ViewModelを介してViewを更新していくイメージがつかめたでしょうか。
MVVMパターンを試してみたい方はぜひ使ってみてください。