| 作者 | Steve Sanderson |
|---|---|
| 初版 | 2010年7月5日(2010-07-05) |
| 最新版 | |
| リポジトリ |
👁 ウィキデータを編集 |
| プログラミング 言語 | 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>Firstname:<inputdata-bind="value: firstName"/></p> <p>Lastname:<inputdata-bind="value: lastName"/></p> <h2>Hello,<spandata-bind="text: fullName"></span>!</h2>
View Model (Javascript)
[編集]functionViewModel(){ this.firstName=ko.observable("Planet"); this.lastName=ko.observable("Earth"); this.fullName=ko.computed(function(){ returnthis.firstName()+" "+this.lastName(); },this); } ko.applyBindings(newViewModel());
JSONを使用するバインディング
[編集]このサンプルではJSONで記述された、データをリストとして表示している。以下のソースも上記のサンプルと同様でイベントハンドリングを行わなくてもよく、変更された値はJSONでサーバサイドに対し送信することもできる。
View (HTML)
[編集]<table> <thead> <tr> <td>Id</td> <td>Cd</td> <td>Name</td> </tr> </thead> <tbodydata-bind='foreach: products'> <tr> <td><spandata-bind='text: Id'/></td> <td><spandata-bind='text: Cd'/></td> <td><spandata-bind='text: Name'/></td> </tr> </tbody> </table>
View Model (Javascript)
[編集]varproductModel=function(src){ varself=this; self.products=ko.observableArray(src); }; varviewModel=newproductModel([ {Id:"10",Cd:"01588",Name:"Apple"}, {Id:"11",Cd:"05178",Name:"Banana"} ]); ko.applyBindings(viewModel);
脚注・出典
[編集]- ↑ Steven Sanderson.“KnockoutJs: Downloads”. knockoutjs.com.2019年8月29日閲覧。
- ↑ Papa, John(2012年2月).“Getting Started with Knockout”.MSDN Magazine.http://msdn.microsoft.com/en-us/magazine/hh781029.aspx2012年12月16日閲覧。
{{cite news}}:|accessdate=の日付が不正です。 (説明)⚠ - ↑ Steven Sanderson.“Steven Sanderson's blog: About me”. Steven Sanderson's blog.2012年12月16日閲覧。
- ↑ Scott Guthrie.“Announcing the ASP.NET and Web Tools 2012.2 Release Candidate”. Scott Guthrie.2012年12月16日閲覧。
- ↑ Steven Sanderson.“KnockoutJs: Introduction”. knockoutjs.com.2012年12月16日閲覧。
参考文献
[編集]- Papa, John(2012年3月).“Knockout's Built-in Bindings for HTML and JavaScript”.MSDN Magazine.http://msdn.microsoft.com/en-us/magazine/hh852598.aspx2012年12月16日閲覧。
{{cite news}}:|accessdate=の日付が不正です。 (説明)⚠ - Papa, John(2012年2月).“Building HTML5 and JavaScript Apps with MVVM and Knockout”.Pluralsight.http://www.pluralsight-training.net/microsoft/Courses/TableOfContents?courseName=knockout-mvvm2012年12月16日閲覧。
{{cite news}}:|accessdate=の日付が不正です。 (説明)⚠