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