如何在 EmberJS 中有效地在同一路由上載入多個模型？

EmberJS：在同一條路線上載入多個模型

使用EmberJS 時，你可能會遇到需要在同一路徑上載入多個不相關模型的情況相同的路線。這可能會令人困惑，特別是如果您不熟悉客戶端 MVC 框架。

警告：

在嘗試載入多個模型之前，請考慮以下事項：

• 路由是否基於URL slug（例如/ books/:id）載入動態資料？如果是，請不要從模型掛鉤載入多個模型，因為它可以跳過模型掛鉤並使用提供的模型，這可能會導致問題。

適當時載入多個模型：

如果路由沒有動態 URL，您可以從路由的模型掛鉤傳回多個模型。例如：

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

載入多個具有Promise 的模型：

如果取得資料涉及Promise，可以在模型hook 中使用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中文網其他相關文章！