前回はEmber.
今回からは簡単なアプリケーションを作成しながら，
今回のテーマはRoutingとTemplatesです。
なぜこの2つから解説を始めるかというと，
今回のゴールは次のようなEmber.
前準備
さて，
前回からのアップデート
前回の記事からのEmber.
- ※1
- 詳しくはEmber.
js 1. 9.0のリリースノートを参照してください。 - ※2
- Ember.
jsはGoogle Chromeと同じようなタイムボックスによるリリースサイクルを採用しているため， 頻繁に新しいバージョンが公開されます。次の安定版である1. 10. 0は2015年1～2月にリリース予定です。
ファイルの準備
まずはEmber.
jsを使うために必要なライブラリをダウンロードします。 HTMLとJavaScriptファイルを作成します。
index.html <!DOCTYPE html> <html> <head> <script src="libs/jquery-2. 1.1. min. js"></script> <script src="libs/ handlebars-v2. 0.0. js"></script> <script src="libs/ ember. js"></script> <script src="app. js"></script> </head> <body> </body> </html> app.js App = Ember.Application.create();次のディレクトリ構成で配置します。
. ├── app.js ├── index. html └── libs ├── ember. js ├── handlebars-v. 2.0. 0.js └── jquery-2. 1.1. js
開発ツールのインストール
Ember.
- Google Chrome版 … Ember Inspector - Chrome ウェブストア
- Firefox版 … Ember Inspector :: Add-ons for Firefox
この拡張を入れると，
Ember Inspector
このタブでは，
さて，
Templates
では，
Ember.
ただ，
- ※3
- Ember.
js 1. 10からはHTMLBarsという Handlebarsの後継のテンプレートに変更される予定です。記述が多少変わりますが大きな変更はありません。1. 10がリリースされた際にはあらためて解説します。
ではHandlebarsの記法を見ていくことにしましょう。
先ほど作成したindex.のbodyタグの中に次のタグを追加してください。
<script type="text/x-handlebars" data-template-name="index">
<h1>{{title}}</h1>
タグ:
{{#each tag in tags}}
<span>{{tag}}</span>
{{/each}}
{{!これはコメントです}}
<p>{{body}}</p>
書いた人: {{author.name}}
<div {{bind-attr class=status}}>
{{publishedAt}} 公開
</div>
{{#if author.twitter}}
(@{{author.twitter}})
{{/if}}
<hr>
記事を修正する:
{{input value=body}}
</script>また，app.に次の内容を追記してください。
App.IndexRoute = Ember.Route.extend({
model: function() {
var post = {
title: '実践入門 Ember.js',
body: 'Ember.jsについて解説します。',
tags: ['Ember.js', 'JavaScript'],
status: 'newly',
publishedAt: '2014年12月23日',
author: {
name: '佐藤竜之介',
twitter: 'tricknotes'
}
};
return post;
}
});これは，postが参照するオブジェクトをテンプレートに渡すためのコードです
さて，
とくにCSSを入れていないのでとても簡素な見た目ですが，
<script type="text/x-handlebars" data-template-name="index"> scriptタグにtype="text/を指定することで，x-handlebars" Ember. jsで使うためのテンプレートであることをEmber. jsに知らせています。また， data-template-nameに指定した値がテンプレートの名前になります（※4）。Ember. jsがテンプレートを探索する際はこの名前を利用します。 - ※4
data-template-nameの代わりにidを使うこともできますが，ページ内のIDと重複することを避けるため， 本連載では data-template-nameを使うことにします。
<h1>{{title}}</h1>{{から}}で囲まれた部分にはオブジェクトのプロパティやHandlebarsのヘルパーを埋め込むことができます。ここではオブジェクトのプロパティであるtitleを埋め込んで表示しています。{{#each tag in tags}}...{{/each}}値が配列の場合，
eachヘルパーを使うと要素をひとつひとつ取り出せます。この#と/で範囲を指定するヘルパーをHandlebarsの用語では"Block Expressions"と呼びます。{{!これはコメントです}}{{!～}}の範囲はコメントです。HTMLには描画されません。{{author.name}} オブジェクトがネストしている場合，
.で深い階層の値を参照できます。<div {{bind-attr class=status}}>HTMLの属性を埋め込みたい場合は
bind-attrヘルパーを使います。下の例のように属性に{{～}}を埋め込んだ場合，エラーになってしまい動作しません。 <div class="{{status}}">これはEmber.
jsが提供するHandlebarsでの値の自動更新の実装上の制約です。 ただ，
Ember. js 1. 10. 0から導入予定のHTMLBarsではこの制約はありませんので， 上の例のように属性を直接埋め込んでも動作します。 {{#if author.twitter}} 値の真偽で出力を切り替えられます。通常のJavaScriptと同じく
0，''（空文字） が偽として評価されるほか， 空配列も偽として評価されます。 ifの他に，値が偽のときに評価される unlessもあります。そしてそのどちらもelseが指定可能です。次の2つの例は同じように評価されます。
{{#if isPublished}} {{else}} (この記事は未公開です) {{/if}} {{#unless isPublished}} (この記事は未公開です) {{/if}}{{#unless isPublished}} (この記事は未公開です) {{/if}}elseは範囲を取らない（ {{#else}}~{{/else}}とならない）ことに注意してください。 {{input value=body}}inputタグを生成するヘルパーです。value=bodyとすることで，inputタグのvalue属性とオブジェクトのbodyプロパティを結びつけています。これによって，ユーザがテキストフィールドに値を入力することで画面に表示されている bodyも追従して変更されます。このような仕組みを「データバインディング」 と呼びます。Ember. jsはデータバインディングを全面的にサポートすることで， アプリケーションから決まりきった画面更新のロジックを排しプログラマの負担を軽減してくれます。
以上，
