複数の無関係なモデルを単一の EmberJS ルートにロードするにはどうすればよいですか?

EmberJS: 単一のルートに複数の無関係なモデルをロードする

EmberJS アプリケーションを構築する場合、無関係なデータの複数のモデルを単一のルートにロードする必要が生じる場合があります。 。この質問では、このようなタスクに適したアプローチについて詳しく説明します。

考慮事項

読み込みプロセスに着手する前に、モデル フックで複数のモデルを返すことが正当であるかどうかを判断することが重要です。このアプローチを強く推奨しないシナリオは、ルートが URL スラッグに基づいて動的データをロードする場合です (例: this.resource('foo', {path: ':id'}))。このような状況で複数のモデルをロードしようとすると、ルートにリンクするときに潜在的な問題が発生します。 Ember はモデル フックをバイパスし、リンク中に指定されたモデルを使用します。その結果、複数のモデルを取得することを予期していたのに 1 つしか受け取らなかったため、動作に一貫性がなくなります。

モデル フックの読み込みの代替手段

複数のモデルを読み込む場合モデル フックのアプローチが不適切なルートでは、次の代替案を検討してください:

setupController/afterModel フック内: setupController または afterModel フックで追加のモデルを読み込みます。このアプローチにより、必要に応じて結果をコントローラーに手動で接続できます。ただし、これが機能するには、モデル フックのように遷移をブロックする必要がある場合に、afterModel フックから Promise を返す必要があることに注意してください。

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('/books/' + params.id);
  },
  setupController: function(controller, model) {
    // Load additional model and set it on the controller
    controller.set('model2', { bird: 'is the word' });
  }
});

ルートのモデル フック内: 複数の無関係なモデルをロードする必要があり、ルートが動的データをロードしない場合は、モデル フックを利用できます。

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      model1: ['red', 'yellow', 'blue'],
      model2: ['green', 'purple', 'white']
    };
  }
});

Promises の使用: モデルのロードに非同期リクエストが含まれる場合 (例: サーバー呼び出し)、Promise を使用してこれらの操作を解決し、結果のモデルをモデル フックで返します。

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      model1: promise1,
      model2: promise2
    });
  }
});

以上が複数の無関係なモデルを単一の EmberJS ルートにロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。