KnockoutJS

Knockoutはデータモデルを基盤としリッチなユーザインタフェース構築を行う目的で開発されたJavaScriptライブラリである。なお、Knockoutはマイクロソフトの従業員であるスティーブ・サンダーソンにより開発されメンテナンスされているオープンソースプロジェクトであり、マイクロソフト製品ではないがVisual Studio 2012のプロジェクトテンプレートとして jQueryと共に組込まれ、同製品の自動補完システムであるインテリセンスでの使用が可能となるなど、関係性はある。

概要 KnockoutはJavaScriptライブラリであるため、マイクロソフトが開発したASP.NET MVCだけではなく、Ruby on Rails等でも使用するできる。これはJSONでデータのやり取りを行う事によってサーバサイドのテクノロジに依存せずKnockoutを使用する事が可能なことによるためで、MVVMを用いた開発が行えることがメリットとして提示されているが、これも同じ理由で必須ではない。

Knockoutはコンセプトとして、以下の項目が上げられている。宣言型バインディング自動的なユーザインタフェースの更新依存性の追跡テンプレート

サンプル単純なバインディングこのサンプルでは2つのテキストボックスにデータモデルをオブサーバブルな値がバウンドされ、以下の例では2つのテキストボックスの値をfullNameを表示する。これらはイベントハンドリングを行わなくても、モデルが更新されるとテキストボックスに値が反映され、逆にテキストボックスが編集されるとモデルにも反映される。

View (HTML) <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

View Model (Javascript) function ViewModel() { this.firstName = ko.observable("Planet"); this.lastName = ko.observable("Earth"); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); }

ko.applyBindings(new ViewModel());

JSONを使用するバインディングこのサンプルではJSONで記述された、データをリストとして表示している。以下のソースも上記のサンプルと同様でイベントハンドリングを行わなくてもよく、変更された値はJSONでサーバサイドに対し送信することもできる。

View (HTML) <table> <thead> <tr> <td>Id</td> <td>Cd</td> <td>Name</td> </tr> </thead> <tbody data-bind='foreach: products'> <tr> <td><span data-bind='text: Id' /></td> <td><span data-bind='text: Cd' /></td> <td><span data-bind='text: Name' /></td> </tr> </tbody> </table>

View Model (Javascript) var productModel = function (src) { var self = this; self.products = ko.observableArray(src); }; var viewModel = new productModel([ { Id:"10", Cd:"01588", Name:"Apple" }, { Id:"11", Cd:"05178", Name:"Banana" } ]); ko.applyBindings(viewModel);

脚注・出典

参考文献

KnockoutJS

Źródło i licencja