knockout.jsknockout.jsを使い始める


備考

このセクションでは、knockout.jsの概要と、なぜ開発者がそれを使いたいのかを概説します。

また、knockout.js内の大きなテーマについても言及し、関連するトピックにリンクする必要があります。 knockout.jsのドキュメントは新しくなっているので、それらの関連トピックの初期バージョンを作成する必要があります。

バージョン

バージョンノート発売日
3.4.2 バグの修正 2017-03-06
3.4.1 バグの修正 2016-11-08
3.4.0 2015-11-17
3.3.0 2015-02-18
3.2.0 導入されたcomponentバインディング 2014-08-12
3.1.0 2014-05-14
3.0.0 参照: アップグレード(2.xから)ノート 2013年10月25日
2.3.0 最後の2.xリリース 2013-07-08
2.0.0 2011年12月21日
1.2.1 最後の1.xリリース 2011-05-22
1.0.0 2010年7月5日

計算されたオブザーバブル

計算されたオブザーバブルは、ビューモデル上の他のオブザーバブルを「監視」または「反応」することができる関数です。次の例は、ユーザーの総数と平均年齢を表示する方法を示しています。

注:以下の例では、 pureComputed() (v3.2.0で導入を使用することもできます。これは、他のビューモデルのプロパティに基づいて何かを計算し、値を返すためです。

<div>
  Total Users: <span data-bind="text: TotalUsers">2</span><br>
  Average Age: <span data-bind="text: UsersAverageAge">32</span>
</div>
 
var viewModel = function() {

    var self = this;

    this.Users = ko.observableArray([
        { Name: "John Doe", Age: 30 },        
        { Name: "Jane Doe", Age: 34 }
    ]);

    this.TotalUsers = ko.computed(function() {
        return self.Users().length;
    });

    this.UsersAverageAge = ko.computed(function() {
        var totalAge = 0;
        self.Users().forEach(function(user) {
            totalAge += user.Age;
        });
   
        return totalAge / self.TotalUsers();
    });
};

ko.applyBindings(viewModel);
 

はじめに:こんにちは!

HTMLドキュメントの作成とknockout.jsの有効化

HTMLファイルを作成し、 knockout.js<script> タグでインクルードします。

<!DOCTYPE html>
<html>
<head>
    <title>Hello world! (knockout.js)</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>
 

ノックアウトスクリプトの下に 2番目の<script> タグを追加します。このスクリプトタグでは、ビューモデルを初期化し、ドキュメントにデータバインドを適用します

<script>
  var ViewModel = function() {
    this.greeting = ko.observable("Hello");
    this.name = ko.observable("World");

    this.appHeading = ko.pureComputed(function() {
      return this.greeting() + ", " + this.name() + "!";
    }, this);
  };

  var appVM = new ViewModel();

  ko.applyBindings(appVM);
</script>
 

HTMLを本体に追加してビューを作成し続ける:

<section>
  <h1 data-bind="text: appHeading"></h1>
  <p>Greeting: <input data-bind="textInput: greeting" /></p>
  <p>Name: <input data-bind="textInput: name" /></p>
</section>
 

HTML文書を開いてスクリプトを実行すると、 Hello、World!というページが表示されます<input> 要素の単語を変更すると、 <h1> テキストが自動的に更新されます。


作成されたファイルの仕組み

  1. ノックアウトのデバッグバージョンは、外部ソース(cdnjs)からロードされます。

コード:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
 
  1. 観測可能なプロパティを持つビューモデルインスタンスが作成されます。これは、ノックアウトが変更を検出し、それに応じてUIを更新できることを意味します。

コード:

var appVM = new ViewModel();
 
  1. ノックアウトはDOMにdata-bind 属性をチェックし、提供されたビューモデルを使用してUIを更新します。

コード:

ko.applyBindings(appVM);
 
  1. text バインディングが発生すると、ノックアウトは、バインドされたviewmodelで定義されているプロパティの値を使用して、テキスト・ノードを挿入します。

コード:

<h1 data-bind="text: appHeading"></h1>
 

インストールまたはセットアップ

ノックアウトは、ほとんどのJavaScriptプラットフォームやスタンドアロンスクリプトで利用できます。

スクリプトとして含める

ダウンロードページからスクリプトをダウンロードして、標準のscript tag を使用してページに追加することができます

<script type='text/javascript' src='knockout-3.4.0.js'></script>

CDNの使用

Microsoft CDNまたはCDNJSのノックアウトを含めることもできます

<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>

または

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>

npmからインストールする

npm install knockout
 

オプションで--save パラメータを追加してpackage.json ファイルに保存することもできます

バワーからインストール

bower install knockout
 

オプションで--save パラメータを追加してbower.json ファイルに保存することもbower.json ます

NuGetからインストールする

Install-Package knockoutjs