書籍転載：JavaScriptライブラリ実践活用［厳選111］
Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する
書籍転載の4本目（書籍内の番号は「71」）。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
Ember.jsはビューとコントローラを紐付け、HTML DOM更新部分を省略し、シンプルに記述することができるフレームワークです。DOMの更新は煩雑になりやすいため、ビューとJavaScriptコードが行うことを明確に分割でき、可読性を上げることができます。
- 名称： Ember.js
- 分類： フレームワーク
- URL： http://emberjs.com/
- 関連ファイル： ember-1.0.0-pre.2.min.js
使用方法
Ember.js は、jQuery とhandlebars というテンプレートエンジンを使用します。Ember.jsのページより、「DOWNLOAD EMBER」ボタンよりember.js を、Download Handlebars リンクよりHandlebarsがダウンロードできます。使用時は、HTML 上でscript タグを記述し読み込みます。
Ember.jsの構成
Ember.js はMVC モデルで作られています。主に、ビューとデータをどうつなぎ合わせるかという部分にフォーカスし、構造化できるように構成されています。図071-01 のとおり、Ember.js は大きく分けて4つの機能があります。
・モデル
内部データや、API などの外部データとアクセスを行います。
・ビュー
HTML などのビューです。テンプレートエンジンを持ち、コントローラからのデータを受け取り動的にHTMLを整形する機能を持ちます。
・コントローラ
JavaScriptで記述した動的な処理と、ビューの動的な処理をひもづけます。これにより、HTMLのDOMを直接操作を行う必要がなくなります。
・ステートマネージャ
コントローラと同じように、ビューの動的な処理と紐付けますが、たとえば画面すべての項目をまとめて定義し、処理の状態を管理するのがステートマネージャです。たとえば、画面の表示される項目がURLによって変更する場合など、URLによっての処理を定義し、Viewとも紐付けます。
Ember.jsの処理概要
では、サンプルで処理を見て行きましょう。リスト071-01は書籍の一覧を表示するサンプルです。
|
<script type="text/javascript">
<!--
// Emberのアプリケーションオブジェクトを作成
var App = Ember.Application.create();
// 1 配列のデータを持つコントローラを作成
App.ApplicationController = Ember.ArrayController.create();
// 2 どのテンプレートに適用するかを指定
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
// 3 書籍のデータをバインド
App.ApplicationController.set('content', [{
name: 'アプリを作ろう！ Android入門 ～ゼロから学ぶアプリの作成から公開まで',
price : 1995
},
{
name: 'TECHNICAL MASTER はじめてのJSP＆サーブレット Eclipse 3.7 Indigo＋Tomcat 7対応版',
price : 2730
},
{
name: 'Windows Azure Platform開発入門',
price : 3990
}]);
// 4 表示処理開始
App.initialize();
-->
</script>
|
まず、Ember.Application.create 関数でEmber.jsのオブジェクトを生成します。1では、作成したアプリケーションオブジェクトに対して、コントローラを作成しています。2では、App.ApplicationView に対して、Ember.Viewを継承したオブジェクトを作成します。templateName プロパティには、コントローラでどのテンプレートを使用するかid を指定しています。テンプレート上の「data-templatename」属性値と一致させておきます。3では、本の一覧のデータをコントローラにバインドしています。このデータを、ビューでループして一覧表示を行います。4で実際に表示処理を開始しています。
テンプレートエンジン「handlebars」
handlebars はLite なテンプレートエンジンです。コントローラでバインドしたデータをもとに、動的にHTMLを構成することができます。リスト071-02は、コントローラでバインドした本の配列を、HTML でループすることによって一覧化しているサンプルです。
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>書籍紹介</title>
<!--ember.jsをインポート-->
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/handlebars-1.0.0.beta.6.js"></script>
<script src="js/ember-1.0.0-pre.2.min.js"></script>
</head>
<!-- HTMLテンプレート部分 -->
<script type="text/x-handlebars" data-template-name="application">
<h1>書籍一覧</h1>
<div>
<table border="1">
<tr>
<td>名称</td>
<td>価格</td>
</tr>
<!-- 1 ループを行い、本を表示する -->
{{#each App.ApplicationController}}
<tr>
<td>{{name}}</td>
<td>定価{{price}}円</td>
</tr>
{{/each}}
</table>
</div>
</script>
<body>
</body>
|
1 属性「type="text/x-handlebars"」でhandlebars テンプレートであることを示し、「data-template-name="application"」でコントローラと紐付けています。1行ずつの値は、パラメータ名を{{}} で囲むことにより、動的に変化します。
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. MVCパターンでアプリケーションを構築する（Backbone.js）
書籍転載の1本目（書籍内の番号は「86」）。クライアントサイドMVCフレームワークの定番ライブラリの1つ「Backbone.js」の基本的な使い方を解説。
2. Backbone.jsのModelを操作し、イベントを購読する
書籍転載の2本目（書籍内の番号は「87」）。Backbone.jsのModelの内部状態を変更するメソッドが呼ばれた際に発生するchangeイベントを購読することで、Modelの状態変更を監視する方法を説明。
3. Backbone.jsのCollectionを操作し、イベントを購読する
書籍転載の3本目（書籍内の番号は「88」）。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd／change／remove／resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。
4. 【現在、表示中】≫ Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する
書籍転載の4本目（書籍内の番号は「71」）。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。
5. ［AngularJS］HTMLそのものをテンプレートとして動的な表示を実現する
書籍転載の5本目（書籍内の番号は「70」）。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。
