EmberJS-ルーターの複数のモデル

オブジェクトを使用してプロミスを返す_RSVP.hash_を使用して、複数のモデルを定義できます。

構文

Ember.Route.extend ({
   model() {
      return Ember.RSVP.hash({
        //code here
      })
   }
});

例

以下の例は、_RSVP.hash_を使用してデータを表示するための複数のモデルを指定する方法を示しています。前の章で指定された新しいモデルを作成します。ここでは、_app/models/_の下に2つのモデルをレンタルとレビューとして作成しました。

今_rental.js_ファイルを開き、その属性を提供します-

import DS from 'ember-data';

export default DS.Model.extend ({
   owner: DS.attr(),
   city: DS.attr()
});

今_review.js_ファイルを開き、その属性を提供します-

import DS from 'ember-data';

export default DS.Model.extend ({
   author: DS.attr(),
   rating: DS.attr(),
   content: DS.attr()
});

あなたは1つのモデルフックでレンタルとレビューモデルの両方を返し、以下に示すコードを使用してインデックスページ（app/routes/index.js）に表示できます

import Ember from 'ember';

export default Ember.Route.extend ({
   model() {

     //The RSVP.hash methos is built with RSVP.js library that allows to load
         multiple JavaScript promises
      return Ember.RSVP.hash ({

        //Find the records for the given type and returns all the records of this type
            present in the store
         rentals: this.store.findAll('rental'),
         reviews: this.store.findAll('review')
      });
   },
});

これで、インデックステンプレート、つまり_app/templates/index.hbs_ファイルで参照されているRSVPハッシュのモデルデータにアクセスできます-

<h3>Members - City </h3>
<ul>
   {{#each model.rentals as |rental|}}
      <li>{{rental.owner}} - {{rental.city}}</li>
   {{/each}}
</ul>

<h3>Member Reviews </h3>
<ul>
   {{#each model.reviews as |review|}}
      <li>{{review.rating}} - {{review.content}} - by {{review.author}}</li>
   {{/each}}
</ul>

このコードは、Firebaseデータベースのデータを表示します。Firebaseデータベースは、JSON形式で情報を保存するクラウドデータベースです。したがって、このデータベースを使用するには、https://firebase.google.com/[FirebaseのWebサイト]を使用してアカウントを作成します。

EmberFireをインストールして、EmberデータによるFirebaseとインターフェイスします。

ember install emberfire

EmberFireを_package.json_に追加し、firebaseを_bower.json_に追加します。

Firebaseの構成

Firebaseアカウントにログインし、[新しいプロジェクトを作成]ボタンをクリックします。 Emberにアプリケーションに与えられているFirebaseプロジェクトに同じ名前を付けます。

_config/environment.js_ファイルを開いて、Firebase Webサイトで作成されたプロジェクトからEmberアプリケーションの構成情報を追加します。

module.exports = function(environment) {
   var ENV = {
      modulePrefix: 'super-rentals',
      environment: environment,
      rootURL: '/',
      locationType: 'auto',
      EmberENV: {
         FEATURES: {
           //Here you can enable experimental features on an ember canary build
           //e.g. 'with-controller': true
         }
      },

      firebase: {
         apiKey: "AIzaSyAqxzlKErYeg64iN_uROKA5eN40locJSXY",
         authDomain: "multiple-models.firebaseapp.com",
         databaseURL: "https://multiple-models.firebaseio.com",
         storageBucket: "multiple-models.appspot.com"
      },

      APP: {
        //Here you can pass flags/options to your application instance
        //when it is created
      }
   };

//other code here

ENV_セクションで定義されているfirebaseセクションを変更する必要があります。 Firebaseプロジェクトをクリックし、[WebアプリにFirebaseを追加]ボタンをクリックして、_environment.js_ファイルで提供されるfirebaseプロジェクトからfirebaseセクションへの_apiKey、authDomain、databaseURL、および_storageBucket_フィールドを含めます。 EmberFireを構成したら、サーバーを再起動して変更を適用します。

次に、jsonファイルを使用してFirebaseにデータをインポートします。このアプリでは、JSON形式のデータを含む_rentals.json_というファイルを作成しました。

{ "rentals": [{
   "owner": "Will Smith",
   "city": "San Francisco"
   }, {
      "owner": "John Davidson",
      "city": "Seattle"
   }, {
      "owner": "Shane Watson",
      "city": "Portland"
   }],

   "reviews": [{
      "author": "Will Smith",
      "rating": 4,
      "content": "Good Product"
   }, {
      "author": "John Davidson",
      "rating": 5,
      "content": "Nice Product"
   }]
}

Firebaseコンソールに移動し、[データベース]セクションをクリックして[データ]タブを選択します。

Ember.js複数モデル

右側の3つの点をクリックして、[JSONのインポート]オプションを選択します。次に、作成したjsonファイルを参照し、_IMPORT_ボタンをクリックします。

Ember.js複数モデル

次に、Firebaseのアクセス許可を新しいデータベースに設定します。 [Rules]タブに移動し、[_ PUBLISH_]ボタンをクリックしてjsonを更新します。

Ember.js複数モデル

ルールを変更することにより、誰でもデータベースを読み書きできます。