KnockoutJS

Knockout
作者 Steve Sanderson
初版 2010年7月5日 (2010-07-05)
最新版
3.5.1 / 2019年11月5日 (4年前) (2019-11-05)[1]
リポジトリ
ウィキデータを編集
プログラミング
言語		 JavaScript
サポート状況 Active
種別 Webアプリケーションフレームワーク
ライセンス MIT License
公式サイト 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 (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日閲覧。

参考文献[編集]

関連項目[編集]

外部リンク[編集]

「https://ja.wikipedia.org/w/index.php?title=KnockoutJS&oldid=98475287」から取得