「Knockout.js」の版間の差分

2012年4月10日 (火) 05:07時点における版

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

ASP.NET MVCの中の人が作っており、ASP.NET MVC 4に標準搭載される予定となっている。

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

使用例

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

knockoutjsによるhello, worldのようなもの。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Knockoutjs - 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>

computedメソッドで関数をバインドできる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Knockoutjs - 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() {
        // observable
        this.firstName = ko.observable("Mono");
        this.lastName  = ko.observable("Book");

        // computed
        this.fullName = ko.computed(function() {
          return this.firstName() + " " + this.lastName();
        }, this);

        this.capitalizeLastName = function() {
          var currentVal = this.lastName();
          this.lastName(currentVal.toUpperCase());
        };
      };
      // バインディング
      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>
  <p>Full name : <strong data-bind="text: fullName"></strong></p>

  <button data−bind="click: capitalizeLastName">Go caps</button>

</body>
</html>

参考文献

外部リンク

http://knockoutjs.com/ - 公式サイト
http://blog.stevensanderson.com/ - 作者スティーブン・サンダーソン

	この項目「Knockout.js」は、まだ書きかけの項目です。加筆、訂正などをして下さる協力者を求めています。
このテンプレートは分野別のスタブテンプレート（Monobook:スタブカテゴリ参照）に変更することが望まれています。

2012年4月10日 (火) 05:07時点における版

使用例

関連項目

参考文献

外部リンク