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);