「Knockout.js」の版間の差分

提供: MonoBook
ナビゲーションに移動 検索に移動
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]]
 
  
 
== 参考文献 ==
 
== 参考文献 ==

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>

関連項目[編集 | ソースを編集]

参考文献[編集 | ソースを編集]

  1. ↑ http://tips.recatnap.info/converted_to_uppercase_with_click_of_button/

外部リンク[編集 | ソースを編集]

執筆の途中です この項目「Knockout.js」は、まだ書きかけの項目です。加筆、訂正などをして下さる協力者を求めています。
このテンプレートは分野別のスタブテンプレート（Monobook:スタブカテゴリ参照）に変更することが望まれています。
「https://monobook.org/w/index.php?title=Knockout.js&oldid=1277」から取得