Knockout.jsとは - わかりやすく解説 Weblio辞書 (original) (raw)

ウィキペディアウィキペディア

KnockoutJS

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2024/05/24 01:36 UTC 版)

Knockout

作者 Steve Sanderson
初版 2010年7月5日 (2010-07-05)
最新版 3.5.1 / 2019年11月5日 (4年前) (2019-11-05)[1]
リポジトリ github.com/knockout/knockout
プログラミング言語 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)

First name:

Last name:

Hello, !

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)

Id Cd Name

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日閲覧。

参考文献

関連項目

外部リンク

急上昇のことば