knockout.js チュートリアル
knockout.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日 |
インストールまたはセットアップ
ノックアウトは、ほとんどの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
はじめに：こんにちは！
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>テキストが自動的に更新されます。
作成されたファイルの仕組み
- ノックアウトのデバッグバージョンは、外部ソース（cdnjs）からロードされます。
コード：
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
- 観測可能なプロパティを持つビューモデルインスタンスが作成されます。これは、ノックアウトが変更を検出し、それに応じてUIを更新できることを意味します。
コード：
var appVM = new ViewModel();
- ノックアウトはDOMに
data-bind属性をチェックし、提供されたビューモデルを使用してUIを更新します。
コード：
ko.applyBindings(appVM);
-
textバインディングが発生すると、ノックアウトは、バインドされたviewmodelで定義されているプロパティの値を使用して、テキスト・ノードを挿入します。
コード：
<h1 data-bind="text: appHeading"></h1>
計算されたオブザーバブル
計算されたオブザーバブルは、ビューモデル上の他のオブザーバブルを「監視」または「反応」することができる関数です。次の例は、ユーザーの総数と平均年齢を表示する方法を示しています。
注：以下の例では、 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);