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

更新

查看工作示例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>

仅供参考，渲染方法支持以下选项：into, outlet and controller，如下所述。

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

默认情况下，渲染将：

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

您可以覆盖此行为：

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

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

“团队”模板是子路由之间共享的内容（这就是它需要有出口的原因），“团队索引”模板是特定于您的“团队索引”的内容所在的地方去吧。