新的 ember.js 路由：如何连接网点？答案

【问题标题】：new ember.js routing: how to connect outlets?新的 ember.js 路由：如何连接网点？
【发布时间】：2013-01-16 19:02:07
【问题描述】：

我很困惑如何使用新的路由器方法连接插座。

index.html：

...
<script type="text/x-handlebars" data-template-name="application">
  <h4>The application handelbar</h4>
  {{! outlet 1}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h4>The index handelbar</h4>
  {{! outlet 2 and 3}}
  {{outlet nav}}
  {{outlet main}}
</script>

<script type="text/x-handlebars" data-template-name="main">
  <h4>The main handelbar</h4>
</script>

<script type="text/x-handlebars" data-template-name="nav">
  <h4>The nav handelbar</h4>
</script>
...

app.js：

...
App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});

App.IndexController = Ember.Controller.extend({
});

App.IndexView = Ember.View.extend({
  templateName: 'index'
});
...

此代码呈现 outlet-1。

问题：

为什么会渲染出口 1？ outlet-1 和“index”是如何连接的？
如何将插座 2 和 3 连接到同一个“索引”站点？

谢谢
呜呜呜

【问题讨论】：

标签： ember.js ember-router

【解决方案1】：

您需要在路由处理程序中指定这些内容，使用 renderTemplate 方法（或 renderTemplates 方法，取决于您的构建）。

您没有看到的是 Ember 已经为您设置了很多默认值。事实上，Ember 设置的默认值允许您省略整个路由处理程序。

App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});
App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render(); 
     /* this is the default, it will basically render the
        default template, in this case 'index', into the 
        application template, into the main outlet (i.e. your 
        outlet 1), and set the controller to be IndexController.
     */

  }
});

你想要的是在 renderTemplate 函数中渲染额外的模板，就像这样：

  renderTemplate: function() {
     this.render("index"); 
     // this renders the index template into the primary unnamed outlet. 
     this.render("navtemplate", {outlet: "nav"}); 
     // this renders the navtemplate into the outlet named 'nav'.
     this.render("main", {outlet: "main"});
     // this renders the main template into the outlet named 'main'.
  }

希望这会有所帮助。

【讨论】：

【解决方案2】：

Ember 自动假设/匹配 IndexRoute、IndexController 和 IndexView。这是在ember routing guide

要连接嵌套路由，您可以这样做：

App.OtherRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render('otherTemplate', {
      into: 'index',
      outlet: 'nav'
     }); 
  }
});

Here 是另一个问题的更深入的回答。

【讨论】：

感谢您的回答和有用的 stackoverflow 链接！抱歉，我的声望很低，无法投票。