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');
  });
});

更新

查看工作示例here

总之，您需要提供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模板

使用post视图（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>

Answer 2

您错过了团队页面中的插座。模板应如下所示。

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

每条路线都会渲染到它的父模板的插座中。

所以当你进入“团队”时，“团队”会被渲染到“应用程序”出口。

当您转到“bob”时，“bob”模板将呈现在“团队”插座中。

这可以被覆盖，但是默认行为。

此外，每个父资源都为您提供了两个模型/控制器/视图/模板集。所以当你定义：

this.resource('team',{path:'/team'});

您可以获得“团队”模板和“团队索引”模板。

“团队”模板是子路由之间共享的东西（这就是为什么它需要有出口）和“团队索引”模板是特定于“团队索引”的东西去。

Ember pre4 - 嵌套路线

2 个答案: