13

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

索引.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>
...

应用程序.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？出口 1 和“索引”如何连接？
  • 如何将插座 2 和 3 连接到同一个“索引”站点？

谢谢
咪咪

4

2 回答 2

15

You need to specify this stuff in a route handler, using the renderTemplate method (or renderTemplates method, depending on your build).

What you're not seeing is that Ember is setting quite a few defaults for you already. In fact, the defaults set by Ember have allowed you to omit the entire route handler. 

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.
     */

  }
});

What you want is to render additional templates in the renderTemplate function, likeso:

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

Hope this helps.

于 2013-01-16T23:26:18.620 回答
6

Ember 自动假设/匹配 IndexRoute、IndexController 和 IndexView。这是在ember 路由指南中

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

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

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

于 2013-01-17T02:25:12.170 回答