新的ember.js路由:如何连接网点？

Question

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

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.

问题:

• 为什么要渲染outlet-1？outlet-1和"index"如何连接？
• 如何将插座2和3连接到同一个"索引"站点？

谢谢
你

Answer 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函数中渲染其他模板,likeo:

  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'.
  }

希望这可以帮助.

Answer 2

Ember自动采用IndexRoute,IndexController和IndexView进行匹配/匹配.这是在余烬路线指南中

要连接嵌套路由,您可以这样做:

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

这是另一个问题的更深入的答案.