ember.js - `needs` 渲染模板前未等待数据返回

Question

我正在尝试实现一个 Controller needing另一个( CampaignsNew 需要 AppsIndex )，看起来像

App.CampaignsNewController = Ember.Controller.extend({
   needs: ['appsIndex']
});

在我的 CampaignsNew模板我通过

{{#if controllers.appsIndex.content.isUpdating}}
  {{view App.SpinnerView}}
{{else}}
  {{#each controllers.appsIndex.content}}
    {{name}}
  {{/each}}
{{/if}}

然而 controllers.appsIndex.content.isUpdating从来都不是真的。 IE。它试图在数据加载之前显示数据。

我的 AppsIndex route 已覆盖模型:

App.AppsIndexRoute = Ember.Route.extend({
  model: function(controller) {
    var store = this.get('store').findAll('app');
  }
  ...
});

如果我将相同的代码放入我的 CampaignsNew 中，我可以让它工作。路由和修改模板到 each通过 controller.content .这对我说 needs是不是用的路线？如果我去 /apps 也可以。页面并加载数据，然后导航到 /campaigns/new页。

我怎样才能让它工作？谢谢!

编辑:
根据要求，我的路由器的相关部分:

App.Router.map(function() {
  this.resource('apps', function() {
    ...
  });

  this.resource('campaigns', function() {
    this.route('new');
  });
});

和 AppsIndex访问 /apps和 CampaignsNew在 /campaigns/new
编辑2:
在实现@kingpin2k 的建议后，我发现 Ember 抛出了一个错误。以下是更新的文件和收到的错误。

App.CampaignsNewController = Ember.ObjectController.extend({
  pageTitle: 'New Campaign'
});

App.CampaignsNewRoute = Ember.Route.extend({
  model: function(controller) {
    return Ember.RSVP.hash({
      campaign: this.store.createRecord('campaign'),
      apps: this.store.find('app')
    });
    // return this.store.createRecord('campaign');
  },

  setupController: function(controller, model){
    controller.set('apps', model.apps);
    this._super(controller, model.campaign);
  }
});

Ember 抛出此错误:

Error while loading route: Error: Assertion Failed: Cannot delegate set('apps', <DS.RecordArray:ember689>) to the 'content' property of object proxy <App.CampaignsNewController:ember756>: its 'content' is undefined.

我 read online这是因为内容对象不存在。如果我这样设置:

App.CampaignsNewController = Ember.ObjectController.extend({
  content: Ember.Object.create(),
  ...
});

然后页面加载没有错误，当检查 Ember Chrome 扩展时，我可以看到数据已经加载。但它不会显示在页面上。我想这是因为 content对象存在，因此 Ember 在渲染模板之前没有等待模型的 promise 实现。不过，您必须以这种方式定义内容似乎很奇怪。关于如何处理这个问题的任何见解？

编辑3:在 another thread 中为我解答了问题

Answer 1

根据您的路由器，apps不是 campaigns/new 的父级.
这意味着有人可以点击 #/campaigns/new和 Ember 将命中 ApplicationRoute , CampaignsRoute , 和 CampaignsNewRoute为请求的 url 填充必要的信息。使用需求作为 Controller 之间沟通的一种方式真的只有在祖先模式中才有意义(也就是与你的 parent 、祖 parent 等沟通)。
就像另一个快速说明，AppsIndex是 Apps 的路线，当您的网址包含 child 时，它不会被击中。例如
路由器

this.resource('apps', function() {
  this.resource('chocolate', function(){
     .....
  });
});

网址被击中

#/apps/chocolate

将被击中的路线

ApplicationRoute
AppsRoute
ChocolateRoute
ChocolateIndexRoute

仅当您未指定资源的路由并且您正在点击该确切资源(也就是没有超过该资源)时，才会点击索引路由。
更新
您可以从特定 Hook 返回多个模型:

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  }
});

如果您希望主要模型仍然是奶牛，您可以在 setupController 上进行切换。等级。

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  },
  setupController: function(controller, model){
    controller.set('dogs', model.dogs);  // there is a property on the controller called dogs with the dogs
    this._super(controller, model.cows);  // the model backing the controller is cows
  }
});

在这里查看第二个答案， EmberJS: How to load multiple models on the same route? (第一个也是正确的，只是没有提到从模型钩子(Hook)返回多个模型的问题)。
您也可以在 setupController 期间设置属性, 虽然这意味着它在页面加载时不可用，但稍后异步。
哪个 Controller ？
如果您不打算使用模型支持 Controller ，请使用 Controller。

App.FooRoute = Em.Route.extend({
  model: function(){
    return undefined;
  }
});

使用 ObjectController，如果您要将 Controller 的模型设置为某种东西，那不是集合。

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  }
});

如果某物将成为某种集合，请使用 ArrayController。

App.FooRoute = Em.Route.extend({
  model: function(){  
    return ['asdf','fdsasfd'];
  }
});

笔记
如果你覆盖 setupController，它不会设置 Controller 的型号，除非你明确告诉它，或者使用 this._super .

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  },
  setupController: function(controller, model){
    controller.set('cows', model.cows);
    controller.set('dogs', model.dogs);
    // uh oh, model isn't set on the controller, it should just be Controller
    // or you should define one of them as the model
    // controller.set('model', model.cows); or
    // this._super(controller, model.cows); this does the default setupController method
    // in this particular case, ArrayController
  }
});