EmberJS の同じルートに複数のモデルを効果的にロードするにはどうすればよいですか?-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-30 09:58:27

オリジナル

628 人が閲覧しました

How to Effectively Load Multiple Models on the Same Route in EmberJS?

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

EmberJS を使用する場合、複数の無関係なモデルを同じルートにロードする必要がある状況が発生することがあります。同じルート。これは、特にクライアント側 MVC フレームワークを初めて使用する場合には、混乱する可能性があります。

注意:

複数のモデルをロードする前に、次の点を考慮してください。

ルートは URL スラッグ (/books/:id など) に基づいて動的データを読み込んでいますか? 「はい」の場合、モデルフックから複数のモデルをロードしないでください。モデルフックをスキップして提供されたモデルを使用すると、問題が発生する可能性があります。

適切な場合の複数のモデルのロード:

ルートに動的 URL がない場合は、ルートのモデルフックから複数のモデルを返すことができます。例:

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

ログイン後にコピー

Promise を使用した複数のモデルのロード:

データのフェッチに Promise が含まれる場合は、モデルフックで RSVP.hash メソッドを使用できます:

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

ログイン後にコピー

Ember データを使用したモデルのロード:

Ember データを使用する場合、モデルフックで複数のモデルを見つけることができます:

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

ログイン後にコピー

代替アプローチ (動的ルートの処理により適しています):

モデルフックから複数のモデルをロードする代わりに、setupController または afterModel フックを使用して、コントローラーにモデルプロパティを設定できます。

コントローラーメソッドのセットアップ:

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'});
  }
});

ログイン後にコピー

モデル後メソッド:

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'));
  }
});

ログイン後にコピー

このアプローチにより、モデルがsetupController フックで使用でき、コントローラーのプロパティに安全に割り当てることができます。

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