如何在单个 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中文网其他相关文章！