「Knockout.js」の版間の差分

← 古い編集
ビジュアルウィキテキスト
imported>Administrator
 
(2人の利用者による、間の22版が非表示)
1行目: 1行目:
'''Knockout'''（のっくあうと）とは、[[jQuery]]上に構築された、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]][[フレームワーク]]である。
'''Knockout.js'''（のっくあうと）とは、[[MVVM]]パターンで[[UI]]（[[HTML]]）を動的更新できるようにしつつ、それでいて超簡素に[[ソースコード]]を書けるようにする[[JavaScript]][[フレームワーク]]である。


[[ASP.NET MVC]]の中の人が作っており、[[ASP.NET MVC 4]]に標準搭載される予定となっている。
Knockout.jsのライバルとして[[Backbone.js]]の名前が出てくることが多いが、Backbone.jsは[[MVC]]、Knockout.jsは[[MVVM]]なので別物だと思うがどうなんだろう？


2012年4月6日時点の最新版であるKnockout 2.0.0は、わずかmin+gz版で13KBと非常に軽量だが、とてつもない破壊力を持っている。ただ[[マイクロソフト]]との関連性が強いことによる宗教上の理由により嫌悪されているのか、日本語の情報は皆無に近い。[[Knockout]]は[[Twitter Bootstrap]]、[[PHP]]とあわせstrict教の信者には受け入れがたいと言われている。
== 概要 ==
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]]


== 使用例 ==
== 使用例 ==
公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「[[jQuery]]って何ぞ？」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。[[プログラマー]]視点、かつ英文で書かれては一般大衆には理解できない罠。
公式サイト上のチュートリアルを触った感じでは何かよくわかんないけど凄いが「[[jQuery]]って何ぞ？」という人にはまったく参考にならないことが判明。超初心者に中途半端なソースを提示されてもまったく意味がわからないという。[[プログラマー]]視点、かつ英文で書かれては一般大衆には理解できない罠。


knockoutjsによる[[hello, world]]のようなもの。
=== 使用例1 ===
Knockout.jsによる[[hello, world]]のようなもの。
<source lang="html5">
<source lang="html5">
<!DOCTYPE html>
<!DOCTYPE html>
14行目: 62行目:
<head>
<head>
   <meta charset="UTF-8">
   <meta charset="UTF-8">
   <title>Knockoutjs - Test01</title>
   <title>knockout.js - Test01</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>
39行目: 87行目:
</source>
</source>


 
=== 使用例2 ===
 
computedメソッドで関数をバインドできる。<ref>http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/</ref>
computedメソッドで関数をバインドできる。
<source lang="html5">
<source lang="html5">
<!DOCTYPE html>
<!DOCTYPE html>
47行目: 94行目:
<head>
<head>
   <meta charset="UTF-8">
   <meta charset="UTF-8">
   <title>Knockoutjs - Test01</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が準備されてからじゃないと動かないよ。
 
       // モデル
       // モデル
       var AppViewModel = function() {
       function AppViewModel() {
         // observable
         // observable
         this.firstName = ko.observable("Mono");
         this.firstName = ko.observable("Mono");
65行目: 113行目:
           return this.firstName() + " " + this.lastName();
           return this.firstName() + " " + this.lastName();
         }, this);
         }, this);
 
       }
        this.capitalizeLastName = function() {
          var currentVal = this.lastName();
          this.lastName(currentVal.toUpperCase());
        };
       };
       // バインディング
       // バインディング
       ko.applyBindings(new AppViewModel());
       ko.applyBindings(new AppViewModel());
     });
     })();
   </script>
   </script>
</head>
</head>
<body>
<body>
   <p>First name: <strong data-bind="text: firstName"></strong></p>
<!-- テキストボックス（input）を編集し、フォーカスが外れた瞬間にcomputedが走る模様。-->
   <p>Last name : <strong data-bind="text: lastName"></strong></p>
   <p>First name: <input data-bind="value: firstName" /></p>
   <p>Full name : <strong data-bind="text: fullName"></strong></p>
   <p>Last name: <input data-bind="value: lastName" /></p>
 
   <p>Full name: <strong data-bind="text: fullName"></strong></p>
  <button data−bind="click: capitalizeLastName">Go caps</button>
 
</body>
</body>
</html>
</html>
88行目: 130行目:


== 関連項目 ==
== 関連項目 ==
* [[jQuery]]
* [[JavaScript]]
* [[JavaScript]]
** [[jQuery]]
** [[Backbone.js]]
** [[Knockback.js]]
* [[ASP.NET SPA]]
* [[ASP.NET MVC]]
* [[ASP.NET MVC]]
* [[ASP.NET SPA]]


== 参考文献 ==
== 参考文献 ==
「https://monobook.org/wiki/Knockout.js」から取得