「Knockout.js」の版間の差分
imported>Administrator |
(→関数) |
||
(2人の利用者による、間の19版が非表示) | |||
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]] | ||
== 使用例 == | == 使用例 == | ||
公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「[[jQuery]]って何ぞ?」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。[[プログラマー]]視点、かつ英文で書かれては一般大衆には理解できない罠。 | 公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「[[jQuery]]って何ぞ?」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。[[プログラマー]]視点、かつ英文で書かれては一般大衆には理解できない罠。 | ||
− | + | === 使用例1 === | |
+ | Knockout.jsによる[[hello, world]]のようなもの。 | ||
<source lang="html5"> | <source lang="html5"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
17行目: | 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> | ||
42行目: | 87行目: | ||
</source> | </source> | ||
+ | === 使用例2 === | ||
computedメソッドで関数をバインドできる。<ref>http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/</ref> | computedメソッドで関数をバインドできる。<ref>http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/</ref> | ||
<source lang="html5"> | <source lang="html5"> | ||
48行目: | 94行目: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
− | <title> | + | <title>knockout.js - Test02</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> | ||
+ | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function() { | jQuery(function() { | ||
// ready関数 | // ready関数 | ||
// knockoutjsはDOMが準備されてからじゃないと動かないよ。 | // knockoutjsはDOMが準備されてからじゃないと動かないよ。 | ||
− | + | ||
// モデル | // モデル | ||
− | + | function AppViewModel() { | |
// observable | // observable | ||
this.firstName = ko.observable("Mono"); | this.firstName = ko.observable("Mono"); | ||
66行目: | 113行目: | ||
return this.firstName() + " " + this.lastName(); | return this.firstName() + " " + this.lastName(); | ||
}, this); | }, this); | ||
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | } | ||
// バインディング | // バインディング | ||
ko.applyBindings(new AppViewModel()); | ko.applyBindings(new AppViewModel()); | ||
− | }); | + | })(); |
</script> | </script> | ||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
− | <p>First name: < | + | <!-- テキストボックス(input)を編集し、フォーカスが外れた瞬間にcomputedが走る模様。--> |
− | <p>Last name : < | + | <p>First name: <input data-bind="value: firstName" /></p> |
− | <p>Full name : <strong data-bind="text: fullName"></strong></p> | + | <p>Last name: <input data-bind="value: lastName" /></p> |
− | + | <p>Full name: <strong data-bind="text: fullName"></strong></p> | |
− | |||
− | |||
</body> | </body> | ||
</html> | </html> | ||
89行目: | 130行目: | ||
== 関連項目 == | == 関連項目 == | ||
− | |||
* [[JavaScript]] | * [[JavaScript]] | ||
+ | ** [[jQuery]] | ||
+ | ** [[Backbone.js]] | ||
+ | ** [[Knockback.js]] | ||
+ | * [[ASP.NET SPA]] | ||
* [[ASP.NET MVC]] | * [[ASP.NET MVC]] | ||
− | |||
== 参考文献 == | == 参考文献 == |
2012年7月25日 (水) 09:06時点における最新版
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と非常に軽量だが、とてつもない破壊力を持っている。ただマイクロソフトとの関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。英語の情報は結構あるが少なくとも日本ではそんなものは誰得、無に等しい。Knockout.jsはTwitter Bootstrap、PHPとあわせstrict教の信者には受け入れがたいと言われている。
導入[編集 | ソースを編集]
Visual Studioを使っているのであればNuGetから簡単に導入できる。
関数[編集 | ソースを編集]
組み込みバインディング[編集 | ソースを編集]
テンプレートのレンダリング[編集 | ソースを編集]
先進的なテクニック[編集 | ソースを編集]
プラグイン[編集 | ソースを編集]
使用例[編集 | ソースを編集]
公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「jQueryって何ぞ?」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。プログラマー視点、かつ英文で書かれては一般大衆には理解できない罠。
使用例1[編集 | ソースを編集]
Knockout.jsによるhello, worldのようなもの。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - Test01</title>
<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">
jQuery(function() {
// ready関数
// knockoutjsはDOMが準備されてからじゃないと動かないよ。
// モデル
var AppViewModel = function() {
this.firstName = "Mono";
this.lastName = "Book";
};
// バインディング
ko.applyBindings(new AppViewModel());
});
</script>
</head>
<body>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name : <strong data-bind="text: lastName"></strong></p>
</body>
</html>
使用例2[編集 | ソースを編集]
computedメソッドで関数をバインドできる。[1]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - Test02</title>
<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">
jQuery(function() {
// ready関数
// knockoutjsはDOMが準備されてからじゃないと動かないよ。
// モデル
function AppViewModel() {
// observable
this.firstName = ko.observable("Mono");
this.lastName = ko.observable("Book");
// computed
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
// バインディング
ko.applyBindings(new AppViewModel());
})();
</script>
</head>
<body>
<!-- テキストボックス(input)を編集し、フォーカスが外れた瞬間にcomputedが走る模様。-->
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
</body>
</html>