KnockoutJS

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動: 案内検索
Knockout
作者 Steve Sanderson
初版 2010年07月05日 (2010-07-05)
最新版 2.2.1 / 2013年01月15日(14か月前) (2013-01-15[1]
プログラミング言語 JavaScript
サポート状況 Active
種別 Webアプリケーションフレームワーク
ライセンス MIT
公式サイト knockoutjs.com
テンプレートを表示

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

概要[編集]

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

Knockoutはコンセプトとして、以下の項目が上げられている。

  • 宣言型バインディング
  • 自動的なUIの更新
  • 依存性の追跡
  • テンプレート

サンプル[編集]

単純なバインディング[編集]

このサンプルでは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);

脚注・出典[編集]

  1. ^ Steven Sanderson. “KnockoutJs: Downloads”. knockoutjs.com. 2012年12月16日閲覧。
  2. ^ Papa, John (2012年2月). “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日閲覧。

参考文献[編集]

外部リンク[編集]