Project nested route

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.js"></script>
<script type="text/x-handlebars" data-template-name='app-view'>
    <h1>Welcome to projects app!</h1>
    <a {{action showProjects}}>Projects home</a>
    <hr/>
    {{outlet projectsList}}
    <hr/>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name='projects-view'>
    {{controller.length}} projects:
    <ul>
    {{#each project in controller}}
        <li>
            <a {{action showProject context="project"}}>{{project.name}}</a>
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name='project-view'>
    <h2>Showing project <i>{{name}}</i></h2>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name='info-view'>
    {{description}}
</script>

CSS

a {
    color: blue
}

JavaScript

App = Ember.Application.create();

App.Project = DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string')
});

App.Project.FIXTURES = [{
    id: '36',
    name: 'First project',
    description: 'My very first project'
}, {
    id: '42',
    name: 'Another project',
    description: 'My other favorite project'
}];

App.store = DS.Store.create({
    adapter: DS.fixtureAdapter,
    revision: 4
});


App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'app-view'
})

App.ProjectsController = Ember.ArrayController.extend();
App.ProjectsView = Ember.View.extend({
    templateName: 'projects-view'
})

App.ProjectController = Ember.ObjectController.extend();
App.ProjectView = Ember.View.extend({
    templateName: 'project-view'
})

App.InfoController = Ember.ObjectController.extend();
App.InfoView = Ember.View.extend({
    templateName: 'info-view'
})

App.Router = Ember.Router.extend({
    enableLogging: true,

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/'
        }),

        showProjects: function(router) {
            router.transitionTo('projects.index');
        }, 
                
        projects: Ember.Route.extend({
            route: 'projects',

            connectOutlets: function(router) {
                var applicationController = router.get('applicationController');
                applicationController.connectOutlet({
                    outletName: 'projectsList',
                    name: 'projects',
                    context: App.Project.find()
                });
            },

            index: Ember.Route.extend({
                route: '/'
            }),
        
            showProject: function(router, event) {
                var project = event.context;
                router.transitionTo('project.info', project);
            },

            project: Ember.Route.extend({
                route:...