差分

'''Knockout.js'''（のっくあうと）とは、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]][[フレームワーク]]である。

KnockoutのライバルとしてKnockout.jsのライバルとして[[Backbone.js]]の名前が出てくることが多いが、Backbone.jsは[[MVC]]、Knockoutは、Knockout.jsは[[MVVM]]なので別物だと思うがどうなんだろう？

Knockoutは== 概要 ==Knockout.jsは[[ASP.NET MVC]]や[[jQuery]]の中の人が中心となって作っており、[[ASP.NET MVC 4]]に標準搭載される予定となっている。なお、Knockoutはに標準搭載される予定となっていたが、土壇場でキャンセルされた模様である。なお、Knockout.jsは[[ASP.NET MVC]]や[[jQuery]]が無くても単体で使える。現実的な話では少なくとも[[jQuery]]はあった方がいいが。

2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]]との関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。英語の情報は結構あるが少なくとも日本ではそんなものは誰得、無に等しい。[[Knockout]]はとの関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。英語の情報は結構あるが少なくとも日本ではそんなものは誰得、無に等しい。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]]

knockoutjsによる=== 使用例1 ===Knockout.jsによる[[hello, world]]のようなもの。

<title>Knockoutjs knockout.js - Test01</title>

<title>Knockoutjs knockout.js - Test01Test02</title>

var function AppViewModel = function() {

  this.capitalizeLastName = function() { var currentVal = this.lastName(); this.lastName(currentVal.toUpperCase()); }; };

})();

<!-- テキストボックス（input）を編集し、フォーカスが外れた瞬間にcomputedが走る模様。--> <p>First name: <strong input data-bind="textvalue: firstName"></strong></p> <p>Last name : <strong input data-bind="textvalue: lastName"></strong></p> <p>Full name : <strong data-bind="text: fullName"></strong></p>  <button data−bind="click: capitalizeLastName">Go caps</button>