如何在 EmberJS 中的相同路由上載入多個模型？

在EmberJS 中的相同路由上載入多個模型

在EmberJS 中，有時需要將多個不相關的模型載入到單一路由中。對於客戶端 MVC 框架的新手來說，這個概念可能會令人困惑。為了幫助澄清，本指南詳細解釋瞭如何處理這種情況，以及根據路由對 URL 參數的依賴性採取的適當方法。

傳回多個模型的注意事項

在模型鉤子中傳回多個模型之前，確定路由是否根據URL 中的slug :id 載入動態資料至關重要。如果答案是肯定的，則應避免從同一個鉤子加載多個模型。這是因為 Ember 的連結機制允許您在轉換到路由時指定模型，這將繞過模型掛鉤並使用提供的模型。這可能會導致問題，因為您期望有多個模型，但只有一個可用。

路線載入動態資料時的替代方法

如果路線載入動態資料基於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 Data：

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中文網其他相關文章！