Question

SCENARIO
我目前有一个IndexRoute。我想加载3个其他控制器。这3个其他控制器称为Sports，News，Business。我阅读了embersjs文档，并指出您需要在renderTemplate中为每个要在索引中显示的控制器实现IndexRoute挂钩。 http://emberjs.com/guides/routing/rendering-a-template/

一旦我这样做，我就放入了索引模板

{{ outlet sports }}
{{ outlet news }}
{{ outlet business }}

它们正在显示但是当我查看EmberInspector扩展时，Sports，News，Business的单个模型未加载。

问题
为什么这些Sports，News，Business的模型未在索引中加载？

查看我的代码示例的JSBIN
http://jsbin.com/gecarido/1/edit

附加图片 enter image description here

Answer 1

仅当您通过网址定义并点击路线时，才会点击

路线。

例如，如果您按照以下方式定义路由器：

Ember.Router.map(function(){
  this.resource('foo', function(){
    this.resource('bar');
  });
});

点击/foo/bar

会命中

App.FooRoute = Em.Route.extend({

});

和

App.BarRoute = Em.Route.extend({

});

如果你想从根网址全部点击，你可以从应用程序模型钩子中返回所有内容。

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return {
      colors: ['red', 'yellow', 'blue'],
      news: ['Europe', 'Asia', 'America'],
      business: ['Markets', 'Finance', 'Stocks'],
      sports: ['golf', 'hockey', 'football']
    };
  }  
});

然后您可以使用模板中的render并为其提供模板名称和模型。

<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>

  <ul>
  {{#each item in colors}}
    <li>{{item}}</li>
  {{/each}}
  </ul>

  <br>
  {{render 'sports' sports}}
  <br>
  {{render 'news' news}}
  <br>
  {{render 'business' business}}
  <br>
  {{outlet}}
</script>

http://jsbin.com/gecarido/3/edit

Answer 2

我有另一个答案，用更模块化的方法解决了这个问题

在我原来的解决方案中
我假设每个控制器都有自己的路由，并且该路由将处理返回该控制器的数据。因此，如果你包括所有3个控制器，每个控制器都会处理它自己的模型。但我做了错误的假设。我重读了embersjs http://emberjs.com/guides/controllers/中的“note on coupling”。

所以我从该文档得到的是该路由负责获取所有模型，但您必须告诉它将其分配给该路由中的其他控制器。我还阅读了模型和灯具http://emberjs.com/guides/models/the-fixture-adapter/

我的新解决方案

摆脱额外的路线（现在）
添加了夹具数据的Ember数据
我仍然保持{{outlet}}我用了 “setupController”挂钩在IndexRoute中连接外部具有正确数据的控制器。 这是关键

这种方法的原因是我可能想在UI中的其他地方使用那些控制器“新闻”，“商业”，“体育”。我甚至可能在将来设置自己的路线，我认为通过使用ember数据和模型现在将有所帮助。

参见JSBIN解决方案
请注意，此解决方案适用于我的桌面，但JSBIN会抛出一些奇怪的脚本0错误 http://jsbin.com/gecarido/5/edit

Emberjs将多个控制器加载到一个控制器中

2 个答案: