KnockoutJS
（Knockout.jsから転送）
| 作者 | Steve Sanderson |
|---|---|
| 初版 | 2010年7月5日 |
| 最新版 |
3.5.1 / 2019年11月5日[1] |
| リポジトリ | |
| プログラミング 言語 | JavaScript |
| サポート状況 | Active |
| 種別 | Webアプリケーションフレームワーク |
| ライセンス | MIT License |
| 公式サイト |
knockoutjs |
Knockoutはデータモデルを基盤としリッチなユーザインタフェース構築を行う目的で開発されたJavaScriptライブラリである[2]。なお、Knockoutはマイクロソフトの従業員[3]であるスティーブ・サンダーソンにより開発されメンテナンスされているオープンソースプロジェクトであり、マイクロソフト製品ではないがVisual Studio 2012のプロジェクトテンプレートとして jQueryと共に組込まれ、同製品の自動補完システムであるインテリセンスでの使用が可能となる[4]など、関係性はある。
概要[編集]
KnockoutはJavaScriptライブラリであるため、マイクロソフトが開発したASP.NET MVCだけではなく、Ruby on Rails等でも使用するできる。これはJSONでデータのやり取りを行う事によってサーバサイドのテクノロジに依存せずKnockoutを使用する事が可能なことによるためで、MVVMを用いた開発が行えることがメリットとして提示されているが、これも同じ理由で必須ではない[5]。 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);
