Ember pre4 - nested routes

I am trying to figure out how to use nested routes.

My code is:

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 Bob's page:

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

What am I missing?

jsbin

Thank.

+5
source share
2 answers

try instead

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

Between you, you can simplify the map of the router in this way - you need to specify the path if it differs from the route name.

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

UPDATE

See working example here

So, you need to provide an implementation of the renderTemplate TeamBobRoute function, where you explicitly specify where you want to display your template bob. Using the rendering option into, you can override the default behavior, render the parent socket and choose which parent template to display in

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 : 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>
+11

. .

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

"team" "team-index".

"team" - , , ( ), "team-index" - , , " ", .

+3

All Articles