Ember parent route

HTML

<script src="https://dl.dropboxusercontent.com/u/1640776/libs/28d67611.vendor.js"></script>
<script type="text/x-handlebars">
    click on a category below to enter the category route
    <nav class="main">
        <ul>
            {{#each this}}
            <li>{{#link-to 'category' this}}{{title}}{{/linkTo}}</li>
            {{/each}}
        </ul>
    </nav>
    {{outlet}}
</script>

<script type="text/x-handlebars" id="category">
    <section class="category">
        <header>
            <h1>{{title}}</h1>
        </header>
        click on a section below to enter the section route
        <nav>
            <ul>
                {{#each items}}
                <li>{{#linkTo section this}}{{title}}{{/linkTo}}</li>
                {{/each}}
            </ul>
        </nav>
    </section>
    {{outlet}}
</script>
        
<script type="text/x-handlebars" id="section">
    <section class="section">
        <header>
            <h1>{{title}}</h1>
        </header>
        <a href="#" {{action gotoIndex}}>click here to go to this section's category route</a>
    </section>
</script>

CSS

nav.main {
    margin-bottom: 20px;
}
section.category {
    margin-bottom: 20px;
}

JavaScript

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.FixtureAdapter
});

App.Router.map(function() {
    this.resource('category', {path: ':category_id'}, function() {
        this.resource('section', {path: ':section_id'});  
    });
});

App.Section = DS.Model.extend({
    title: DS.attr('string') 
});
App.Section.FIXTURES = [{
    id: 1,
    title: 'lorem'
}, {
    id: 2,
    title: 'ipsum'
}, {
    id: 3,
    title: 'dolor'
}, {
    id: 4,
    title: 'sit'
}];

App.Category = DS.Model.extend({
    title: DS.attr('string'),
    items: DS.hasMany('App.Section')
});
App.Category.FIXTURES = [{
    id: 1,
    title: 'foo',
    items: [1, 2]
}, {
    id: 2,
    title: 'bar',
    items: [3, 4]
}];

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return App.Category.find();
    }
});
App.SectionRoute = Ember.Route.extend({
    events: {
        gotoIndex: function() {
            var model = this.modelFor('category');
            this.transitionTo('category.index', this.modelFor('category'));
        }
    }
});