Ember Nested Route

by kesch

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.3/ember-data.js"></script>
<script type="text/x-handlebars">
    Main
    <br />
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="entries">
    {{#each entry in this}}
        {{#if entry.isActive}}
            {{#link-to 'entries'}}Close{{/link-to}}
        {{else}}
            {{#link-to 'entry' entry}}Details{{/link-to}}
        {{/if}}
        <br />
    {{/each}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="entry">
    {{name}}
    {{#if isEditing}}
        {{#link-to 'entry'}}Cancel{{/link-to}}
    {{else}}
        {{#link-to 'entry.edit'}}Edit{{/link-to}}
        {{#link-to 'entries'}}Close{{/link-to}}
    {{/if}}
</script>

JavaScript

(function () {
	"use strict";

	window.App = Ember.Application.create({
        LOG_TRANSITIONS: true
    });
	
	App.ApplicationAdapter = DS.FixtureAdapter.extend();

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

	App.Entry.FIXTURES = [
		{
			id: 1,
			name: 'Name 1',
			type: 'Entry'
		},
		{
			id: 2,
			name: 'Name 2',
			type: 'Entry'
		},
		{
			id: 3,
			name: 'Name 3',
			type: 'Entry'
		}
	];

	App.Router.map(function () {
        this.resource('index', { path: '/' });
		this.resource('entries', { path: '/entries' }, function () {
    		this.resource('entry', { path: '/entry/:id' }, function () {
                this.route('edit');
		    });
        });
	});
    
    App.IndexRoute = Ember.Route.extend({
        redirect: function () {
            this.transitionTo('entries');
        }
    });

	App.EntriesRoute = Ember.Route.extend({
		model: function () {
            Ember.Logger.log('list.index route.model');
			return this.get('store').find('entry');
		},
        afterModel: function (entries) {
            Ember.Logger.log('list.index route.afterModel');
        },
        actions: {
            willTransition: function (transition) {
                Ember.Logger.log('list.index route.willTransition');
            }
        }
	});
	
	App.EntryRoute = Ember.Route.extend({
		model: function (params) {
            Ember.Logger.log('list.entry.index route.model');
	 		return this.get('store').find('entry', params.id);
		},
        afterModel: function (entry) {
            Ember.Logger.log('list.entry.index route.afterModel');
            entry.set('isActive', true);
        },
        actions: {
            willTransition: function (transition) {
                Ember.Logger.log('list.entry.index route.willTransition');
                var entry = this.modelFor('entry');
                entry.set('isActive', false);
            }
        }
	});

	App.EntryEditRoute = Ember.Route.extend({
        model: function (params) {
         ...