Knockout.js

提供: MonoBook
ナビゲーションに移動 検索に移動

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

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

概要

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

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

関連項目

参考文献

外部リンク