knockoutjsのサンプルソースを見ながら味見をします。YEOMANのgeneratorにknockoutがあるのですがあまりメンテナンスされていないのでgenerator-webappにbowerコンポーネントとしてknockoutjsを追加します。
今回は
- 一般的なknockoutjsのインストール方法
- サンプルソースの実装
- generator-webappへのknockoutjsのインストール
を行います
一般的なknockoutjsのインストール方法
knockoutjsは下記URLからダウンロードします。
http://knockoutjs.com/downloads/index.html
ファイルの配置は
<html>
<head>
<script src="js/knockout-3.1.0.js"></script>
</head>
<body>
<!-- js/main -->
<script src="js/main.js"></script>
</body>
</html>
としています。
サンプルソースの実装
knockoutのサイトにあるチュートリアルから簡単なサンプルを作りました。実装そのものはあまり悩む必要はありません。最も簡単なサンプルは次の通りです。
index.htmlは
<html>
<head>
<script src="js/knockout-3.1.0.js"></script>
</head>
<body>
<p>ファーストネーム: <input data-bind="value: firstName" /></p>
<p>ラストネーム: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
<!-- js/main -->
<script src="js/main.js"></script>
</body>
</html>
main.jsは
(function() {
// ViewModel を定義します
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function() {
// Knockout は依存を自動的にトラッキングします。
// fullName の評価中に firstName と lastName を呼び出すため、
// それぞれに依存していることが検知されます。
return this.firstName() + " " + this.lastName();
}, this)
};
// 次のコードで Knockout を起動します。
ko.applyBindings(new ViewModel("Planet", "Earth"));
})();
これでデータバインディングを味わうことが可能です。
generator-webappへのknockoutインストール
さて、knockoutjsをbowerインストールします。今回利用するgeneratorはWebAppを使うことにしました。ウェブアプリケーションを作るに当たっては最も基本的なgeneratorですので使います。
インストールを始める前にknockoutjsがbowerコンポーネントとして登録されているかを確認します
では
- generator-webappのインストール
- webappでテンプレート作成
- knockoutjsのbowerインストール
といった手順で行います。
$ npm install -g generator-webapp
$ yo webapp
と進めて行きます。
$ bower install knockoutjs --save
でknockoutのインストールを行いますが、この後knockoutの場合はビルドを行います
$ cd app/bower_components/knockoutjs $ npm install $ grunt
そうすると
app/bower_components/knockoutjs/build/output
の中に
knockout-latest.debug.js
knockout-latest.js
が生成されています。このファイルをindex.htmlに記述し利用します。これでWebAppでknockoutを利用することができます。knockoutのチュートリアルではjQueryを利用しているものもありますので必要なファイルは適時追加して行きます。
