albatrosary's blog

UI/UXとエンタープライズシステム

knockoutjsとYEOMANと、knockoutを味見するにもbower

knockoutjsのサンプルソースを見ながら味見をします。YEOMANのgeneratorにknockoutがあるのですがあまりメンテナンスされていないのでgenerator-webappにbowerコンポーネントとしてknockoutjsを追加します。

 

今回は

  1. 一般的なknockoutjsのインストール方法
  2. サンプルソースの実装
  3. generator-webappへのknockoutjsのインストール

を行います

一般的なknockoutjsのインストール方法

knockoutjsは下記URLからダウンロードします。

f:id:albatrosary:20140429114020p:plain

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コンポーネントとして登録されているかを確認します

f:id:albatrosary:20140429152334p:plain

では

  1. generator-webappのインストール
  2. webappでテンプレート作成
  3. 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を利用しているものもありますので必要なファイルは適時追加して行きます。