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を表示する。これらはイベント ハンドリングを行わなくても、モデルが更新されるとテキストボックスに値が反映され、逆にテキストボックスが編集されるとモデルにも反映される。

<p>Firstname:<inputdata-bind="value: firstName"/></p>
<p>Lastname:<inputdata-bind="value: lastName"/></p>
<h2>Hello,<spandata-bind="text: fullName"></span>!</h2>

functionViewModel(){
this.firstName=ko.observable("Planet");
this.lastName=ko.observable("Earth");
this.fullName=ko.computed(function(){
returnthis.firstName()+" "+this.lastName();
},this);
}
ko.applyBindings(newViewModel());

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

<table>
<thead>
<tr>
<td>Id</td>
<td>Cd</td>
<td>Name</td>
</tr>
</thead>
<tbodydata-bind='foreach: products'>
<tr>
<td><spandata-bind='text: Id'/></td>
<td><spandata-bind='text: Cd'/></td>
<td><spandata-bind='text: Name'/></td>
</tr>
</tbody>
</table>

varproductModel=function(src){
varself=this;
self.products=ko.observableArray(src);
};
varviewModel=newproductModel([
{Id:"10",Cd:"01588",Name:"Apple"},
{Id:"11",Cd:"05178",Name:"Banana"}
]);
ko.applyBindings(viewModel);

1. ^ Steven Sanderson. "KnockoutJs: Downloads". knockoutjs.com. 2019年8月29日閲覧。
2. ^ Papa, John (February 2012). "Getting Started with Knockout". MSDN Magazine. http://msdn.microsoft.com/en-us/magazine/hh781029.aspx 2012年12月16日閲覧。 
3. ^ Steven Sanderson. "Steven Sanderson's blog: About me". Steven Sanderson's blog. 2012年12月16日閲覧。
4. ^ Scott Guthrie. "Announcing the ASP.NET and Web Tools 2012.2 Release Candidate". Scott Guthrie. 2012年12月16日閲覧。
5. ^ Steven Sanderson. "KnockoutJs: Introduction". knockoutjs.com. 2012年12月16日閲覧。

• Papa, John (March 2012). "Knockout's Built-in Bindings for HTML and JavaScript". MSDN Magazine. http://msdn.microsoft.com/en-us/magazine/hh852598.aspx 2012年12月16日閲覧。 
• Papa, John (February 2012). "Building HTML5 and JavaScript Apps with MVVM and Knockout". Pluralsight. http://www.pluralsight-training.net/microsoft/Courses/TableOfContents?courseName=knockout-mvvm 2012年12月16日閲覧。 

• JavaScript
• Ajax
• AngularJS(1.x,2.0α Ver)
• Aurelia.js
• Backbone.js
• Ember.js
• JavaScriptライブラリ
• Javascript framework
• JQuery
• MooTools
• Polymer
• Prototype JavaScript Framework
• Ractive.js
• React
• Riot.js
• vue.js

• 公式ウェブサイト
• Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET
• Using Isotope with Knockout.js
• Knockout questions on StackOverflow
• Knockout forum on Google Groups
• knock out JS Examples
• Knockout.日本語ドキュメント

• JavaScript開発ツール
• JavaScriptライブラリ
• オープンソースソフトウェア