Ember pre4 - 嵌套路线

Question

我试图了解如何使用嵌套路由.

我的代码:

App.Router.map(function() {
  this.route("site", { path: "/" });
  this.route("about", { path: "/about" });
  this.resource("team", {path:'/team'}, function(){
    this.resource('bob',{path:'/bob'});
  });
});

而我正试图通过以下方式访问Bob页面:

{{#linkTo 'bob'}}bob{{/linkTo}}

我错过了什么？

jsbin

谢谢.

Answer 1

试着改为

{{#linkTo 'team.bob'}}bob{{/linkTo}}

在您之间可以通过这种方式简化路由器映射 - 只需要指定路径,如果它与路由名称不同.

App.Router.map(function() {
  this.route("site", { path: "/" });
  this.route("about");
  this.resource("team", function(){
    this.route('bob');
  });
});

UPDATE

在这里查看一个工作示例

总之,您需要提供TeamBobRoute的renderTemplate函数的实现,您可以在其中明确指定要呈现模板的位置bob.使用渲染选项,into您可以覆盖默认行为,渲染到父插座,并选择要渲染到哪个父模板

App.TeamBobRoute = Ember.Route.extend({
  renderTemplate:function(){
    this.render('bob',{
      into:'application',
    });
  }
});

<script type="text/x-handlebars" data-template-name="site-template">
  This is the site template
    {{#linkTo 'about'}}about{{/linkTo}}
     {{#linkTo 'team'}}team{{/linkTo}}
</script>

  <script type="text/x-handlebars" data-template-name="about">
  This is the about page
</script>

    <script type="text/x-handlebars" data-template-name="team">
  This is the team page
    {{#linkTo 'team.bob'}}bob{{/linkTo}}
</script>

  <script type="text/x-handlebars" data-template-name="bob">
  This is the bob page
</script>

<script type="text/x-handlebars">
  This is the application template
  {{outlet}}
</script>

仅供参考,render方法支持以下选项:into, outlet and controller如下所述.

PostRoute路由器定义的名称是post.

默认情况下,渲染将:

• 渲染post模板
• 使用postview(PostView)进行事件处理(如果存在)
• 和post控制器(PostController),如果存在
• 进入模板的main出口application

您可以覆盖此行为:

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('myPost', {   // the template to render
      into: 'index',          // the template to render into
      outlet: 'detail',       // the name of the outlet in that template
      controller: 'blogPost'  // the controller to use for the template
    });
  }
});

如果您的应用程序模板中有一个命名模板,那么您将以这种方式定位它

App.TeamBobRoute = Ember.Route.extend({
  renderTemplate:function(){
    this.render('bob',{
      into:'application',
      outlet:'team-member',
    });
  }
});

<script type="text/x-handlebars">
  This is the application template
  {{outlet 'team-member'}}
  {{outlet}}
</script>