KnockoutJS

Knockout

作者	Steve Sanderson
初版	2010年7月5日 (2010-07-05)
最新版	3.5.1 / 2019年11月5日 (2019-11-05)
リポジトリ	github.com/knockout/knockout
プログラミング 言語	JavaScript
サポート状況	Active
種別	Webアプリケーションフレームワーク
ライセンス	MIT License
公式サイト	knockoutjs.com

Knockoutはデータモデルを基盤としリッチなユーザインタフェース構築を行う目的で開発されたJavaScriptライブラリである。なお、Knockoutはマイクロソフトの従業員であるSteave Sandersonにより開発されメンテナンスされているオープンソースプロジェクトであり、マイクロソフト製品ではないが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);

参考文献

• Papa, John (2012年3月). “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 (2012年2月). “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
• Knockout.js
• MooTools
• Polymer
• Prototype JavaScript Framework
• Ractive.js
• React.js
• 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.日本語ドキュメント