「Knockout.js」の版間の差分
ナビゲーションに移動
検索に移動
imported>Administrator |
imported>Administrator (→使用例) |
||
35行目: | 35行目: | ||
<p>First name: <strong data-bind="text: firstName"></strong></p> | <p>First name: <strong data-bind="text: firstName"></strong></p> | ||
<p>Last name : <strong data-bind="text: lastName"></strong></p> | <p>Last name : <strong data-bind="text: lastName"></strong></p> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | |||
+ | computedメソッドで関数をバインドできる。 | ||
+ | <source lang="html5"> | ||
+ | <!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() { | ||
+ | // observable | ||
+ | this.firstName = ko.observable("Mono"); | ||
+ | this.lastName = ko.observable("Book"); | ||
+ | |||
+ | // computed | ||
+ | this.fullName = ko.computed(function() { | ||
+ | return this.firstName() + " " + this.lastName(); | ||
+ | }, this); | ||
+ | |||
+ | this.capitalizeLastName = function() { | ||
+ | var currentVal = this.lastName(); | ||
+ | this.lastName(currentVal.toUpperCase()); | ||
+ | }; | ||
+ | }; | ||
+ | // バインディング | ||
+ | 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> | ||
+ | <p>Full name : <strong data-bind="text: fullName"></strong></p> | ||
+ | |||
+ | <button data−bind="click: capitalizeLastName">Go caps</button> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
2012年4月10日 (火) 05:07時点における版
Knockout(のっくあうと)とは、jQuery上に構築された、MVVMパターンでUI(HTML)を動的更新できるようにしつつ、それでいて超簡素にソースコードを書けるようにするJavaScriptフレームワークである。
ASP.NET MVCの中の人が作っており、ASP.NET MVC 4に標準搭載される予定となっている。
2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただマイクロソフトとの関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。KnockoutはTwitter Bootstrap、PHPとあわせstrict教の信者には受け入れがたいと言われている。
使用例
公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「jQueryって何ぞ?」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。プログラマー視点、かつ英文で書かれては一般大衆には理解できない罠。
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>
computedメソッドで関数をバインドできる。
<!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() {
// observable
this.firstName = ko.observable("Mono");
this.lastName = ko.observable("Book");
// computed
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName();
this.lastName(currentVal.toUpperCase());
};
};
// バインディング
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>
<p>Full name : <strong data-bind="text: fullName"></strong></p>
<button data−bind="click: capitalizeLastName">Go caps</button>
</body>
</html>