差分
'''Knockout.js'''（のっくあうと）とは、[[jQuery]]上に構築された、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]]フレームワークである。[[フレームワーク]]である。
Knockout.jsのライバルとして[[ASPBackbone.NET js]]の名前が出てくることが多いが、Backbone.jsは[[MVC]]の中の人が作っており、、Knockout.jsは[[ASP.NET MVC 4MVVM]]に標準搭載される予定となっている。なので別物だと思うがどうなんだろう？
== 概要 ==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]]から簡単に導入できる。 == 関数 ==* [[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]]
== 使用例 ==
<source lang="html5">
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Knockoutjs 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>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name : <strong data-bind="text: lastName"></strong></p>
</body>
</html>
</source>
=== 使用例2 ===
computedメソッドで関数をバインドできる。<ref>http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/</ref>
<source lang="html5">
<!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>
== 関連項目 ==
* [[JavaScript]]
** [[jQuery]]
** [[Backbone.js]]
** [[Knockback.js]]
* [[ASP.NET SPA]]
* [[ASP.NET MVC]]
== 参考文献 ==