EmberJS の同じルートに複数のモデルをロードするにはどうすればよいですか?

EmberJS の同じルートに複数のモデルをロードする

EmberJS では、複数の無関係なモデルを 1 つのルートにロードする必要がある場合があります。 。この概念は、クライアント側 MVC フレームワークの初心者にとって混乱を招く可能性があります。明確にするために、このガイドでは、このシナリオの処理方法と、URL パラメーターに対するルートの依存関係に基づいて取るべき適切なアプローチについて詳しく説明します。

複数のモデルを返す場合の考慮事項

モデル フックで複数のモデルを返す前に、ルートが URL のスラッグ :id に基づいて動的データを読み込むかどうかを判断することが重要です。答えが「はい」の場合、同じフックから複数のモデルをロードすることは避けるべきです。これは、Ember のリンク メカニズムにより、ルートに遷移するときにモデルを指定できるため、モデル フックがバイパスされ、代わりに提供されたモデルが使用されます。複数のモデルが想定されているにもかかわらず、使用できるのは 1 つだけであるため、問題が発生する可能性があります。

ルートが動的データをロードする場合の代替アプローチ

ルートが動的にロードされる場合URL パラメーターに基づいてデータを読み込む場合は、モデル フックの代わりに setupController/afterModel を使用して複数のモデルをロードすることをお勧めします。

SetupController を使用すると、コントローラーが作成される前にモデルを変更できます。これを使用して、コントローラーに追加のモデルを追加できます。例:

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

AfterModel を使用すると、モデルがロードされた後に非同期操作を実行できます。これを使用して追加のモデルをロードし、Ember Promise を使用して非同期リクエストを管理できます。例:

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('/books/' + params.id);
  },
  afterModel: function(){
    var self = this;
    return $.getJSON('/authors').then(function(result){
      self.set('authors', result);
    });
  }, 
  setupController: function(controller, model){
    this._super(controller,model);
    controller.set('authors', this.get('authors'));
  }
});

ルートが動的データをロードしない場合に複数のモデルを返す

ルートが URL パラメータに基づいて動的データをロードしない場合に進み、ルートのモデル フックから複数のモデルを返すことができます。構文は簡単です:

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

モデルの読み込みに Promise が含まれる場合、Ember RSVP を使用してリクエストの非同期特性を処理できます。たとえば、Ember データを使用します:

App.IndexRoute = Ember.Route.extend({
  var store = this.store;
  model: function() {
    return Ember.RSVP.hash({
           cats: store.find('cat'),
           dogs: store.find('dog')
    });
  }
});

このアプローチにより、複数のモデルを同時にロードし、テンプレート内の単一のオブジェクトとして処理できます。

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