Ember pre4 - nested routes

Question

I'm trying to understand how to use nested routes.

My code:

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

And I'm trying to get to the Bob page with:

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

What am I missing?

jsbin

Thanks.

Answer 1

try instead

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

Between you can simplify your router map this way - you only need to specify the path if it's different from the route name.

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

UPDATE

See a working example here

In summary, You need to provide an implementation of the renderTemplate function of TeamBobRoute where you explicitly specify where you want to render your template bob. Using the render option into you can override the default behaviour, rendering to the parent outlet, and pick which parent template to render to

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>

FYI the render method supports the following options: into, outlet and controller as described below.

The name of the PostRoute, as defined by the router, is post.

By default, render will:

• render the post template
• with the post view (PostView) for event handling, if one exists
• and the post controller (PostController), if one exists
• into the main outlet of the application template

You can override this behavior:

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

If you had a named template inside your application template then you would target it this way

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

You're missing the outlet in the team page. The template should look like this.

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

Each route is rendered into it's parent's template's outlet.

so when you go into "team", then "team" is rendered into the "application" outlet.

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.