ジャンプ先:

この記事では引き続き、world-clock アプリを作り、コントローラを導入して、clock のビューに機能する時計の追加を行っていきます。

コントローラ

コントローラは、アプリのデータとビューを更新および操作する方法を提供します。 それらは、モデルが変化したとき(例えば、状態やデータ)に何が起こるべきかを記述するアプリのロジックを提供します。 コントローラは MVC の "C"です。

Ember は、正しいモデルとルートに自動的に関連付けられたコントローラを生成する簡単な方法を提供します。 次の構文を使用します。

ember generate controller name-of-my-route

clock のディスプレイのためのコントローラの生成

clock のテンプレートで現地時間をディスプレイするには、localTime 変数を指定して更新する clock のコントローラが必要です。 ターミナルを使用して、プロジェクトのルートディレクトリで次のコマンドを実行します。

ember generate controller clock

これにより、2つの新しいファイルが作成されます。

  1. app/controllers/clock.js : clock のビューを制御するために必要なロジックを含むコントローラを表すファイル。
  2. tests/unit/controllers/clock-test.js : コントローラの機能のテストを定義できるテストファイル。

app/controllers/clock.js を開きます。 localTime の値を設定するには、Controller.extend() 内のプロパティとして追加します。 次のように更新します。

import Controller from '@ember/controller';

export default Controller.extend({
  localTime: new Date().toLocaleTimeString()
});

コントローラ内のプロパティは、そのコントローラのテンプレート(この場合は app/templates/clock.hbs)内でアクセスできます。 localTime プロパティを書式設定された JavaScript の Date 文字列に等しく設定し、それをテンプレートのコンテキストに渡します。 Ember はコントローラとテンプレートで一致するファイル名を使用して、適切なテンプレートに情報を送ります。

今、http://localhost:4200/clock を見ると、{{localTime}} プロパティの代わりに現在の現地時刻が出力されます。

: これらのファイルの先頭にある import Controller from '@ember/controller'; の行は、Ember を利用しているコントローラのファイルが実際にフレームワークにアクセスできるようにします。 この行がなければ、Ember が私たちのためにマッピングした方法でコードを整理することはできません。

毎秒時計を更新する

これまでのところ、clock のディスプレイは、コントローラが初期化された時刻を表示してから変化しません。 これではあまり役に立ちませんから、理想的には1秒ごとに更新したいと考えています。

app/controllers/clock.js に戻って、これを処理するいくつかのメソッドを追加してください — 次のようにファイルを更新してしてください。

import Controller from '@ember/controller';
import { later } from '@ember/runloop';

export default Controller.extend({
    init() {
        this._super(...arguments);
        // Update the time.
        this.updateTime();
    },
 
    updateTime() {
        var _this = this;
 
        // Update the time every second.
        later(function() {
            _this.set('localTime', new Date().toLocaleTimeString());
            _this.updateTime();
        }, 1000);
    },
 
    localTime: new Date().toLocaleTimeString()
});

追加した2つのメソッドは次のとおりです。

  1. init() は、コントローラが最初に初期化されるときに自動的に実行される Ember の特別なメソッドです。 ここに必要な設定コードを置くことができます。 この場合、フレームワークの初期化のための _super() メソッドを呼び出してから、updateTime() メソッドを呼び出すだけです。
  2. updateTime()later() 関数を使用して、1000ms後にコードを実行します。 このメソッドは、(Ember の set() メソッドを使用して)localTime プロパティに新しい値を設定し、updateTime() メソッドを再度実行するので、新しい秒が経過するたびに時刻が更新されます。

今、時計が毎秒自動的に更新されるのが見えるはずです。 これは、コントローラとテンプレート間の Ember のデータバインディングを操作する方法を示しています。 テンプレートに接続されているコントローラ、モデル、またはビューの値を変更すると、テンプレートによって自動的にそのデータが更新されます。

: var _this = this; は関数内の変数スコープのために使用されています — これは updateTime: function() { ... }, に関連した this において later(function() { ... }); 内の関数を実行したいので、内部関数を実行する前に、this への参照を _this 変数に格納しておきます。 Jack Franklin の Scope and this in JavaScript では、より多くのコンテキストと説明を提供しています。

次に

次の記事では一段と力を入れて、Ember のモデルを眺めてデータを扱い、残りのアプリの機能を途中で追加していくつもりです。 また、このセクションでは、いくつかの外部ライブラリを含め、Ember アプリに新しい依存関係を追加する方法のアイデアを示します。

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

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