KnockoutJS

Knockoutはデータモデルを基盤としリッチなユーザインタフェース構築を行う目的で開発されたJavaScriptライブラリである&…

KnockoutJS
Knockout
作者 Steve Sanderson
初版 2010年7月5日 (2010-07-05)
最新版
3.5.1 / 2019年11月5日 (6年前) (2019-11-05)[1]
リポジトリ
ウィキデータを編集
プログラミング
言語		 JavaScript
サポート状況 Active
種別 Webアプリケーションフレームワーク
ライセンス MITライセンス
公式サイト knockoutjs.com
テンプレートを表示

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);

脚注・出典

  1. ^ Steven Sanderson. “KnockoutJs: Downloads”. knockoutjs.com. 2019年8月29日閲覧。
  2. ^ Papa, John (February 2012). “Getting Started with Knockout”. MSDN Magazine. 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日閲覧。

参考文献

関連項目

外部リンク

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.