質問

私はWeb開発の初心者ではありませんが、クライアント側のMVCフレームワークにはかなり慣れています。私はいくつかの研究を行い、EmberJSでそれを試してみることにしました。TodoMVCガイドに目を通したところ、納得のいくものでした...。

私は非常に基本的なアプリを設定しました; インデックスルート、2つのモデル、1つのテンプレート。サーバーサイドのPHPスクリプトを実行し、いくつかのDB行を返します。

私を非常に混乱させる一つのことは、同じルートで複数のモデルをロードする方法です。setupController を使用するという情報をいくつか読みましたが、まだはっきりしません。私のテンプレートには 2 つのテーブルがあり、無関係のデータベース行を読み込もうとしています。より伝統的なウェブアプリでは、SQLステートメントを発行して、行を埋めるためにそれらをループさせるだけだったでしょう。私はこの概念をEmberJSに翻訳するのに苦労しています。

どのように私は同じルート上の無関係なデータの複数のモデルをロードするのですか？

最新のEmberとEmber Dataのlibを使用しています。

更新情報

は対処法を示していますが、2番目の回答では、適切な場合と適切でない場合のさまざまな方法を説明しています。

どのように解決するのですか？

注: Ember 3.16+ アプリの場合、以下は同じコードですが、構文/パターンが更新されています。 https://stackoverflow.com/a/62500918/356849

下記はEmber < 3.16用です。3.16+としても完全な後方互換性があるため動作しますが、古いコードを書くのはいつも楽しいわけではありません。

を使用することができます。 Ember.RSVP.hash を使って複数のモデルを読み込むことができます。

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      people: this.store.findAll('person'),
      companies: this.store.findAll('company')
    });
  },

  setupController(controller, model) {
    this._super(...arguments);
    Ember.set(controller, 'people', model.people);
    Ember.set(controller, 'companies', model.companies);
  }
});

そして、テンプレートの中で people と companies で読み込まれたデータを取得します。

app/templates/index.js

<h2>People:</h2>
<ul>
  {{#each people as |person|}}
    <li>{{person.name}}</li>
  {{/each}}
</ul>
<h2>Companies:</h2>
<ul>
  {{#each companies as |company|}}
    <li>{{company.name}}</li>
  {{/each}}
</ul>

このサンプルでTwiddleです。 https://ember-twiddle.com/c88ce3440ab6201b8d58