「Knockout.js」の版間の差分
imported>Administrator |
|||
| (2人の利用者による、間の16版が非表示) | |||
| 1行目: | 1行目: | ||
'''Knockout'''（のっくあうと）とは、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]][[フレームワーク]]である。 | '''Knockout.js'''（のっくあうと）とは、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]][[フレームワーク]]である。 | ||
Knockout.jsのライバルとして[[Backbone.js]]の名前が出てくることが多いが、Backbone.jsは[[MVC]]、Knockout.jsは[[MVVM]]なので別物だと思うがどうなんだろう？ | |||
== 概要 == | |||
Knockout.jsは[[ASP.NET MVC]]や[[jQuery]]の中の人が中心となって作っており、[[ASP.NET MVC 4]]に標準搭載される予定となっていたが、土壇場でキャンセルされた模様である。なお、Knockout.jsは[[ASP.NET MVC]]や[[jQuery]]が無くても単体で使える。現実的な話では少なくとも[[jQuery]]はあった方がいいが。 | |||
2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]] | 2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]]との関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。英語の情報は結構あるが少なくとも日本ではそんなものは誰得、無に等しい。Knockout.jsは[[Twitter Bootstrap]]、[[PHP]]とあわせ[[strict]]教の信者には受け入れがたいと言われている。 | ||
== 導入 == | |||
[[Visual Studio]]を使っているのであれば[[NuGet]]から簡単に導入できる。 | |||
== 関数 == | |||
* [[Knockout.js/applyBindings関数|applyBindings関数]] | |||
* [[Knockout.js/observable関数|observable関数]] | |||
* [[Knockout.js/observableArray関数|observableArray関数]] | |||
* [[Knockout.js/computed関数|computed関数]] | |||
* [[Knockout.js/subscribe関数|subscribe関数]] | |||
== 組み込みバインディング == | |||
* [[Knockout.js/可視バインディング|可視バインディング]] | |||
** [[Knockout.js/visibleバインディング|visible バインディング]] | |||
** [[Knockout.js/textバインディング|text バインディング]] | |||
** [[Knockout.js/htmlバインディング|html バインディング]] | |||
** [[Knockout.js/cssバインディング|css バインディング]] | |||
** [[Knockout.js/styleバインディング|style バインディング]] | |||
** [[Knockout.js/attrバインディング|attr バインディング]] | |||
* [[Knockout.js/制御フローバインディング|制御フローバインディング]] | |||
** [[Knockout.js/foreach]] | |||
** [[Knockout.js/if]] | |||
** [[Knockout.js/ifnot]] | |||
** [[Knockout.js/with]] | |||
* [[Knockout.js/操作バインディング|操作バインディング]] | |||
** [[Knockout.js/click]] | |||
** [[Knockout.js/event]] | |||
** [[Knockout.js/submit]] | |||
** [[Knockout.js/enable]] | |||
** [[Knockout.js/disable]] | |||
** [[Knockout.js/value]] | |||
** [[Knockout.js/hasfocus]] | |||
** [[Knockout.js/checked]] | |||
** [[Knockout.js/options]] | |||
** [[Knockout.js/selectedOptions]] | |||
** [[Knockout.js/uniqueName]] | |||
=== テンプレートのレンダリング === | |||
* [[Knockout.js/template]] | |||
=== 先進的なテクニック === | |||
=== プラグイン === | |||
* [[Knockout.js/mapping]] | |||
== 使用例 == | == 使用例 == | ||
| 12行目: | 56行目: | ||
=== 使用例1 === | === 使用例1 === | ||
Knockout.jsによる[[hello, world]]のようなもの。 | |||
<source lang="html5"> | <source lang="html5"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| 18行目: | 62行目: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title> | <title>knockout.js - Test01</title> | ||
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> | <script type="text/javascript" src="jquery-1.5.1.min.js"></script> | ||
<script type="text/javascript" src="knockout-2.0.0.js"></script> | <script type="text/javascript" src="knockout-2.0.0.js"></script> | ||
| 77行目: | 121行目: | ||
</head> | </head> | ||
<body> | <body> | ||
<!-- テキストボックス（input）を編集し、フォーカスが外れた瞬間にcomputedが走る模様。--> | |||
<p>First name: <input data-bind="value: firstName" /></p> | <p>First name: <input data-bind="value: firstName" /></p> | ||
<p>Last name: <input data-bind="value: lastName" /></p> | <p>Last name: <input data-bind="value: lastName" /></p> | ||
| 85行目: | 130行目: | ||
== 関連項目 == | == 関連項目 == | ||
* [[JavaScript]] | * [[JavaScript]] | ||
** [[jQuery]] | |||
** [[Backbone.js]] | |||
** [[Knockback.js]] | |||
* [[ASP.NET SPA]] | |||
* [[ASP.NET MVC]] | * [[ASP.NET MVC]] | ||
== 参考文献 == | == 参考文献 == | ||