5

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

我的代码：

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

谢谢。

4

2 回答 2

11

试试吧

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

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

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

更新

在此处查看一个工作示例

总之，您需要提供 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)，如果存在
  • 进入模板的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>
于 2013-01-25T22:08:47.040 回答
3

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

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

每条路由都被渲染到它的父模板的出口中。

因此，当您进入“团队”时，“团队”将呈现到“应用程序”出口中。

When you go to "bob", the "bob" template is rendered into the "team" outlet.

This can be overridden, but is the default behavior.

Also, each parent resources gives you two model/controller/view/template sets. So when you define:

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

You get the "team" template and the "team-index" template.

the "team" template is where stuff that is shared between child routes goes (this is why it needs to have the outlet) and the "team-index" template is where stuff that is specific to your "team index" would go.

于 2013-01-25T22:28:16.840 回答