try instead
{{
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.
:
postpost (PostView) ,post (PostController),main application
:
App.PostRoute = App.Route.extend({
renderTemplate: function() {
this.render('myPost', {
into: 'index',
outlet: 'detail',
controller: 'blogPost'
});
}
});
,
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>