如何在單一 EmberJS 路由中載入多個不相關的模型？

EmberJS：在單一路由中載入多個不相關的模型

建構EmberJS 應用程式時，可能會遇到需要將多個不相關資料的模型載入到單一路由中的情況。這個問題深入探討了執行此類任務的適當方法。

注意事項

在開始載入過程之前，確定在模型掛鉤中傳回多個模型是否合理至關重要。強烈建議不要採用這種方法，即當路由基於 URL slug 載入動態資料時（例如 this.resource('foo', {path: ':id'})）。如果您嘗試在這種情況下載入多個模型，則連結到路線時會出現潛在問題。 Ember 將繞過模型鉤子並使用連結期間提供的模型，從而導致行為不一致，因為您預期會檢索多個模型但只收到一個模型。

模型鉤子加載的替代方案

加載多個模型時在模型掛鉤方法不適合的路線中，請考慮以下替代方案：

在setupController /afterModel Hook 中： 在setupController 或afterModel 掛鉤中載入其他模型。如果需要，這種方法可讓您手動將結果連接到控制器。但是，請注意，要使其發揮作用，當 afterModel 鉤子需要像模型鉤子那樣阻止轉換時，您必須從 afterModel 鉤子返回承諾。

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

在 Route 的 Model Hook 中： 如果需要加載多個不相關的模型，並且路由不加載動態數據，可以利用模型鉤子。

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