如何在 EmberJS 中的同一路由上加载多个模型？

在 EmberJS 中的同一路由上加载多个模型

在 EmberJS 中，有时需要将多个不相关的模型加载到单个路由中。对于客户端 MVC 框架的新手来说，这个概念可能会令人困惑。为了帮助澄清，本指南详细解释了如何处理这种情况，以及根据路由对 URL 参数的依赖性采取的适当方法。

返回多个模型的注意事项

在模型钩子中返回多个模型之前，确定路由是否根据 slug :id 加载动态数据至关重要网址。如果答案是肯定的，则应避免从同一个钩子加载多个模型。这是因为 Ember 的链接机制允许您在转换到路由时指定模型，这将绕过模型挂钩并使用提供的模型。这可能会导致问题，因为您期望有多个模型，但只有一个可用。

路线加载动态数据时的替代方法

如果路线加载动态数据基于 URL 参数的数据，建议使用 setupController/afterModel 而不是 model 来加载多个模型hook.

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