「Knockout.js」の版間の差分
imported>Administrator |
(→関数) |
||
(2人の利用者による、間の6版が非表示) | |||
3行目: | 3行目: | ||
Knockout.jsのライバルとして[[Backbone.js]]の名前が出てくることが多いが、Backbone.jsは[[MVC]]、Knockout.jsは[[MVVM]]なので別物だと思うがどうなんだろう? | 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]]の中の人が中心となって作っており、[[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]]教の信者には受け入れがたいと言われている。 | 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/applyBindings関数|applyBindings関数]] | ||
+ | * [[Knockout.js/observable関数|observable関数]] | ||
+ | * [[Knockout.js/observableArray関数|observableArray関数]] | ||
+ | * [[Knockout.js/computed関数|computed関数]] | ||
+ | * [[Knockout.js/subscribe関数|subscribe関数]] | ||
== 組み込みバインディング == | == 組み込みバインディング == | ||
* [[Knockout.js/可視バインディング|可視バインディング]] | * [[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/制御フローバインディング|制御フローバインディング]] | ||
** [[Knockout.js/foreach]] | ** [[Knockout.js/foreach]] | ||
116行目: | 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>