「Knockout.js」の版間の差分
ナビゲーションに移動
検索に移動
imported>Administrator (→使用例2) |
imported>Administrator (→使用例2) |
||
| 50行目: | 50行目: | ||
<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"); | ||
| 68行目: | 69行目: | ||
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 | + | <p>First name: <input data-bind="value: firstName" /></p> |
| − | <p>Last name : <input | + | <p>Last name: <input data-bind="value: lastName" /></p> |
| − | <p>Full name : <strong data-bind="text: fullName"></strong></p> | + | <p>Full name: <strong data-bind="text: fullName"></strong></p> |
</body> | </body> | ||
</html> | </html> | ||
2012年4月10日 (火) 07:53時点における版
Knockout（のっくあうと）とは、MVVMパターンでUI（HTML）を動的更新できるようにしつつ、それでいて超簡素にソースコードを書けるようにするJavaScriptフレームワークである。
KnockoutのライバルとしてBackbone.jsの名前が出てくることが多いが、Backbone.jsはMVC、KnockoutはMVVMなので別物だと思うがどうなんだろう？
KnockoutはASP.NET MVCやjQueryの中の人が中心となって作っており、ASP.NET MVC 4に標準搭載される予定となっている。 なお、KnockoutはASP.NET MVCやjQueryが無くても単体で使える。現実的な話では少なくともjQueryはあった方がいいが。
2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただマイクロソフトとの関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。英語の情報は結構あるが少なくとも日本ではそんなものは誰得、無に等しい。KnockoutはTwitter Bootstrap、PHPとあわせstrict教の信者には受け入れがたいと言われている。
使用例
公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「jQueryって何ぞ？」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。プログラマー視点、かつ英文で書かれては一般大衆には理解できない罠。
使用例1
knockoutjsによるhello, worldのようなもの。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Knockoutjs - 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>
<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>
関連項目
参考文献
外部リンク
|
この項目「Knockout.js」は、まだ書きかけの項目です。加筆、訂正などをして下さる協力者を求めています。 |
| このテンプレートは分野別のスタブテンプレート（Monobook:スタブカテゴリ参照）に変更することが望まれています。 | |
