ビューとテンプレート

この記事では、先ほど作成したスケルトンのアプリに追加を開始し、Ember のルートとテンプレートの使い方を紹介します。

:この時点では、Ember アプリの作成の手順に従っていることを前提として、スケルトンのアプリのディレクトリにコードを追加する準備が整いました。 まだこの段階になっていない場合は、前のセクションに進み、ここに戻ってください。

ルート

ルートは、コンテンツ/機能の特定の部分が特定の URL に存在することをアプリに伝えます。 各ルートで表示されるコンテンツの構造を指定するテンプレートとともに、Ember アプリの MVC の "V"(ビュー)の基礎を形成します。 ルートをアプリの「ページ」と考えてください。

Ember は構築時に必要なコンテンツの動的生成を処理し、そのコンテンツを動作させる JavaScript、CSS などを適用します。 要約すると、次のコマンドを使用してルートを作成します。

ember generate route my-route-name

現在の時刻の追加

まず、clock の「ページ」を追加して、現在の時刻を表示します。 新しいページを作成するには、ルートを生成する必要があります — プロジェクトのルートディレクトリの中にいることを確認して、ターミナルで次のコマンドを実行してください。

ember generate route clock

これにより次のものが生成されます。

  1. app/routes/clock.js: このファイルはルートを制御します。
  2. app/templates/clock.hbs: 名前付き URL に表示されるコンテンツを定義する Handlebars テンプレート。
  3. tests/unit/routes/clock-test.js : ルートにおける機能のテストを定義できるテストファイル。

あなたの clock のテンプレートは、テストサーバー上の http://localhost:4200/clock で利用可能になります(テストサーバーが現在実行されていない場合は ember serve コマンドを再度実行してください)。 ただし、この URL に移動すると、ホームページ(http://localhost:4200)と同じようにウェルカムメッセージが表示されます。 代わりに現在の時刻を表示するには、clock のテンプレートを更新する必要があります。

テンプレート

さまざまな HTML テンプレートシステムがウェブアプリ用に存在します。 これらは、アプリの状態やデータが変更されたときに動的に更新される変数を含めることができるなど、プレーン HTML より優れた機能を提供する傾向があります。 このシリーズの前半で説明したように、Ember はテンプレートとして Handlebars を使用します。

clock のテンプレートの更新

テンプレートファイルは、すでに app/templates/clock.hbs に生成されています。 テキストエディタでそれを開くと、デフォルトでは以下のものだけが表示されます。

{{outlet}}

Handlebars は中括弧を使用してプレーン HTML とテンプレートのロジックを区別します。 (基本レベルでは)中括弧内の項目は、必要なデータを表す変数です。 現時点では、テンプレートにはデフォルトのウェルカムメッセージのみが含まれています。 現地時刻を出力する変数を含むようにこれを変更してみましょう。

{{outlet}} を次のものに置き換えます。

<h2>Local Time: <strong>{{localTime}}</strong></h2>

これらの中括弧内に localTime をラップすることで、テンプレートでは localTime という単語を指定した値に置き換えることがわかります。

ブラウザーの http://localhost:4200/clock に戻った場合、下に「Local Time: 」とレンダリングされているにもかかわらず、上にウェルカムメッセージがレンダリングされていることがわかります。 これは、ウェルカムメッセージが app/templates/application.hbs から来るためです。 そのファイルを見ると、コメントを除いて次の2行があります。

{{welcome-page}}

{{outlet}}

ビューがアプリのユーザーによってナビゲートされると、application.hbs が表示されますが、ビューのテンプレートのコンテンツも挿入されます。 次のセクションでは、デフォルトのウェルカムメッセージを取り除く方法について、さらに詳しく説明します。

:「Local Time: {{localTime}}」がページに表示されることを予想するかもしれませんが、Handlebars は、中括弧内のものをカスタムデータで置き換えることを知っています。 テンプレートにこの値をまだ指定していないので、その場所には何もレンダリングされません。

メインの application のテンプレート

application.hbs は、アプリを初めて作成したときに作成された特別なテンプレートで、メインアプリのビューまたはマスターアプリのビューを表します。 これは自動的に与えられ、アプリのルート(つまり、your-server.com/)に常に何かが表示されます。 アプリで任意の「ページ」を表示するたびに、実際に表示されるのは application.hbs テンプレートですが、{{outlet}} の代わりにルートのコンテンツに対応するテンプレートが挿入されます。 clock のルートの場合、レンダリングされるコンテンツは clock.hbs に存在するものになります。

これまでのところ、http://localhost:4200/clock の clock のルートを通じてアプリを見てきました。 しかし、これはアプリの唯一でメインのページになるので、私たちのドメインのルートに行くときに表示されるのが良いでしょう。

既に application.hbs ファイルがありますが、それだけで、デフォルトで作成された application のルートはなかったことに気づくでしょう。 しばしば、テンプレートは必要なコンテンツをレンダリングするために必要な全てであることがわかります。 しかし、テンプレートを使ってもっと洗練されたことをしたいのなら、そのロジックを対応するルートに配置する必要があります。

application のルートの生成

プロジェクトのルートディレクトリで次のコマンドを入力して、メインの application のルートを生成しましょう。

ember generate route application

この時点で、「? Overwrite app/templates/application.hbs?」という質問が表示されます。 これは application.hbs が既に存在するためです。 上書きしてもかまいませんので、Y と入力して Enter キーを押して確定します。 この前に ember generate route コマンドを実行したときと同じように、新しいルート、テンプレート、ユニットテストが生成されます。 新しい application.hbs にはウェルカムメッセージはなく {{outlet}} しか含まれていないため、localhost:4200/clock には「Local time:」と表示されるようになります。

application のルートを clock のルートにリダイレクトする

この時点で、app/routes/application.js ファイルを開き、次のように内容を更新します。 ファイルを開き、次のように内容を更新します。

import Route from '@ember/routing/route';

export default Route.extend({
    redirect: function() {
        this.transitionTo('clock');
    }
});

ここでは、redirect() メソッドを使用してデフォルトの Ember の Route 機能を拡張しています。 このメソッドは、application のルートに対するリクエストを transitionTo() を使用して clock のルートに転送します。 http://localhost:4200/ と打つたびに、localhost:4200/clock のカチカチと音を立てる時計にリダイレクトされます。

メインページに時計を表示することに加えて(次の記事で修正します!)、ユーザーはメインの clock のビューとメインのディスプレイに追加する新しいタイムゾーンを選択できるビューを切り替えることができるナビゲーションが必要になります。 application のテンプレートでは、2つのリンクを追加しましょう。 1つは clock のルートに対応し、もう1つはすぐに作成する予定の timezones のルートにリンクします。

app/templates/application.hbs の内容を次のように更新します。

<h1 id="title">It's 5'o'clock somewhere</h1>

<ul>
  <li>{{#link-to "clock"}}Clock{{/link-to}}</li>
  <li>{{#link-to "timezones"}}Manage Timezones{{/link-to}}</li>
</ul>

{{outlet}}

clock のテンプレートで見た中括弧を使用するのと同じ Handlebars の規則に気づくでしょう。 この例では、{{#link-to}} はリンクを作成するための組み込み Handlebars ヘルパーです — リンク先のルートを1つのパラメーターとして取ります。

以前に触れたように、{{outlet}} はユーザーが要求しているビューのコンテンツのためにページ上にスペースを予約する Ember の方法です。 したがって、clock のルートや timezones のルートのリンクをクリックすると、outlet には要求されたルートのテンプレートからコンテンツを自動的にレンダリングします。

今すぐアプリを見ると、そのページが空白であることがわかります。 「Local Time: 」の見出しを失ってしまいました。 コードのどこかに誤りがあるはずなので、今すぐ調査を始めましょう。

デバッグの練習

開発者ツールでコンソールタブを開くと、Ember からのエラーが表示されるはずです。

Error: Assertion Failed: You attempted to define a `{{link-to "timezones"}}` but did not pass the parameters required for generating its dynamic segments. There is no route named timezones
訳:エラー: アサーションに失敗しました:  `{{link-to "timezones"}}` を定義しようとしましたが、動的セグメントの生成に必要なパラメータを渡しませんでした。 timezones という名前のルートはありません。

これは、まだ存在していない timezones のルートにリンクしようとしているためです。 これについては後の記事で扱いますので、今は次の行を更新してください。

<li>{{#link-to "timezones"}}Manage Timezones{{/link-to}}</li>

これを次のようにします。

<li>Manage Timezones</li>

次に続けることができるように、 次のように表示されます。

ここまでの成果のスナップショット

次に

現在の現地時刻を表示するには、clock.hbs テンプレートにある localTime 変数の値を定義するために、対応する clock コントローラを作成する必要があります。 これが次の記事の話題になります。

: 次のパートに進む前に、clock テンプレートの編集時にアプリのディスプレイが自動的に更新されることに注目してください — ページを更新したり、サーバーを再起動したりする必要はありません。 これは Ember CLI の優れた機能です。

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,