実践入門 Ember.js

第2回 URLと画面表示(RoutingとTemplates)

この記事を読むのに必要な時間:およそ 7 分

Route間の遷移

さて,ここまでだとRoutingのありがたみをあまり感じません。なぜならアプリケーションに対して何も操作を行っていないからです。実際のアプリケーションであれば,⁠ボタンをクリックして設定画面を開く」とか「リンクを押して詳細を表示する」といった操作を行うでしょう。

そして,画面遷移は有効になっているRouteが切り替わることで実現されます。では複数のRouteを用意してEmber.jsでの画面遷移を体験してみましょう。

まずはRouterとRouteを用意します。

App.Router.map(function() {
  this.route('posts', {path: '/'});
  this.route('post', {path: '/post/:id'});
});

var posts = [
  {
    id: 1,
    title: 'Ember.js の世界',
    body: 'Ember.js の全体像をご紹介します。'
  }, {
    id: 2,
    title: 'Ember.js の秘密',
    body: 'Ember.js のとっておきをご紹介します。'
  }, {
    id: 3,
    title: 'Ember.js の奇妙な冒険',
    body: 'Ember.js の独特な世界観をご紹介します。'
  }
];

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return posts;
  }
});

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    var found = posts.filter(function (post) {
      return post.id === Number(params.id);
    });

    return found[0];
  }
});

次はテンプレートを用意します。

<script type="text/x-handlebars" data-template-name="posts">
  <h1>記事一覧</h1>

  <ul>
  {{#each post in model}}
    <li>
      {{link-to post.title "post" post}}
    </li>
  {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="post">
  <h1>{{title}}</h1>
  <p>
    {{body}}
  </p>
  {{link-to "戻る" "posts"}}
</script>

完成イメージは次の通りです。

URLが更新される様子を確認するために,別のタブで開いてみてください。

完成イメージ別のタブで開く

Ember Starter Kit

記事のタイトルをクリックして詳細を表示すると,URLにidが含まれていることが確認できます。これで,画面を更新しても同じ画面を表示できます。

これは非常に簡単な例ですが,⁠SPAでの画面にURLを割り当てることができる」ことの雰囲気を感じてもらえたでしょうか?

新登場のヘルパー

では,動作について確認できたところで新しくでてきたヘルパーを紹介します。

link-to

link-toはaタグを出力するヘルパーです。

これを使うと与えられたオブジェクトから生成したURLがhrefに設定され,Route間の遷移ができるようになります。

{{link-to "次へ" "hello" model}}

link-toの引数は次のようになっています。

link-to (テキスト) (route名) (オブジェクト) (オプション)
(テキスト)

生成されるタグのテキストです。

{{#link-to (route名) (オブジェクト) (オプション)}}
  テキスト
{{/link-to}}

と書くこともできるので,テキスト部分にHTMLを含めたい場合こちらを使う方が記述しやすいです。

(route名)

this.route()で指定したRouteの名前です。this.route(name, {path: path})の形でRouteを定義している場合はnameの部分です。

(オブジェクト)

テンプレート中でのmodelは,Routeのmodelメソッドで生成されたオブジェクトを指します。link-toにオブジェクトを渡すと,this.route()で定義したpathにしたがってURLが生成されます。this.route('post', {path: '/post/:id'})の場合,model.idがURL生成に利用されます。

(オプション)

ここにはlink-toが生成するHTMLのためのオプションを渡すことができます(省略可能)⁠指定可能なオプション一覧はAPIリファレンスの"PROPERTIES"を参照してください。

例えば,以下のような使い方ができます。

{{link-to post.title "post" post target="_blank"}}

アプリケーションのレイアウト

いくつもの画面を作成していった場合,⁠ヘッダやサイドバーが共通しているのでどこかにまとめておきたい」というケースが想定されます。そんなときはアプリケーション全体で共通するレイアウトを定義できます。

<script type="text/x-handlebars">
  <header>
    <h1>Ember.js</h1>
  </header>

  <aside id="sidebar">
    ...
  </aside>

  <main>
    {{outlet}}
  </main>

  <footer>
    ...
  </footer>
</script>

ここでのポイントは2つあります。

  1. data-template-nameを指定していない

    data-template-nameを省略すると,アプリケーションでの共通レイアウトとして設定されます※9)⁠

  2. {{outlet}} ヘルパーを使っている

    画面遷移を行うと,共通のレイアウト中の{{outlet}}に各Routeで描画されたテンプレートが差し込まれます。

この共通テンプレートを使うことで,Routeで使われるテンプレートをシンプルに保つことができます。

以上でRoute間の遷移についての解説は終わりです。

※9
data-template-nameを省略すると,applicationという名前がつけられます。明示的にdata-template-name="application"と設定しても問題ありません。

まとめ

今回はEmber.jsアプリケーションを作るための基礎の部分であるRoutingとTemplatesを解説しました。

次回はもう少し実践的な例を用いて,この2つを深く解説します。

著者プロフィール

佐藤竜之介(さとうりゅうのすけ)

株式会社えにしテック所属。JavaScriptとRubyが好きなウェブ系プログラマ。オープンソースソフトウェアに強い関心がありEmber.jsにも数多くのパッチを送っている。

ブログ:http://tricknotes.hateblo.jp/
Twitter:@tricknotes

コメント

  • craete -> create

    デバッグオプションのAfterの箇所がTypoってます。

    App = Ember.Application.craete({
    (略)
    });
    ではなく
    App = Ember.Application.create({
    (略)
    });
    です。

    コピペして動かないので考えこんでしまいました(笑)

    Commented : #1   (2015/01/02, 19:38)

コメントの記入