javascript - Emberjs 将多个 Controller 加载到一个 Controller 中

Question

场景
我目前有一个 IndexRoute。我想将 3 个其他 Controller 加载到其中。这 3 个其他 Controller 称为 Sports、News、Business。我阅读了 embersjs 文档，它指出您需要将 renderTemplate Hook 实现到 IndexRoute 中，以便在索引中显示每个 Controller 。 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

附加图片

Answer 1

仅当您通过 url 定义和命中路由时才会命中路由。

例如，如果您这样定义路由器:

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

然后点击/foo/bar

会撞到

App.FooRoute = Em.Route.extend({

});

和

App.BarRoute = Em.Route.extend({

});

如果你只想从根 url 中访问它，你还不如从应用程序模型 Hook 中返回它。

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