Ember-如何在一页上呈现多个模板？答案

【问题标题】：Ember- How to render multiple templates on one page?Ember-如何在一页上呈现多个模板？
【发布时间】：2014-04-21 20:51:42
【问题描述】：

关注http://emberjs.com/guides/routing/rendering-a-template/我有

<body>   
  <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2> 
    <div class="lists">{{outlet lists}}</div>
    <div class="list">{{outlet list}}</div>  
  </script>

  <script type="text/x-handlebars" data-template-name="lists">
    <h3> some List Names</h3>    
  </script>

  <script type="text/x-handlebars" data-template-name="list">
    <h3> a list selected from lists</h3>    
  </script>    
</body>

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('lists', {path: "/"});
});

App.ListsRoute = Ember.Route.extend({
  renderTemplate: function(){
    this.render({outlet: 'lists'});
  }
});
App.ListRoute = Ember.Route.extend({
  renderTemplate: function(){
    this.render({outlet: 'list'});
  }
});

我希望看到

欢迎使用 Ember.js

一些列表名称

选定列表名称的列表

但这打破了这个 jsbin：http://jsbin.com/cuyuy/6/edit。我仍然想知道如何在一页上呈现多个模板？

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案1】：

在这种情况下很难给出一个好的答案，但如果你添加，你的例子就会起作用

this.render('list', {
      outlet: 'list'
    });

从 ListsRoute 到你的 renderTemplate 钩子。见http://jsbin.com/cuyuy/8/edit

编辑： 由于上面的代码并不是真正的 ember 方式，请查看这个带有嵌套路由的 jsbin：http://jsbin.com/hutem/1/edit

【讨论】：

'Ember way' 是我所追求的。谢谢。所以 ember 方法是...嵌套 outlet 并将嵌套路由放在回调中？如果没有层次结构，只有页面的多个部分，您希望将每个部分保存在自己的 .hbs 文件中（带有自己的模型和控制器）怎么办？
ember 方法并不总是使用嵌套路由，但在这种情况下（根据我所看到的，尤其是“列表”和“列表”名称），它可能是您想要的。如果您根本没有层次结构，据我所知，您有两种方法。 1) 在您的路由中使用 controllerFor 方法：App.ApplicationRoute = Ember.Route.extend({ setupController: function() { this.controllerFor('lists').set('model', App.List.find()); } }); 和模板 {{ render "lists" }} 2) 您尝试在问题中使用的 renderTemplate。