Ember router.transitionTo

by dmazza

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/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <div class='container' id='application'>
        <header>
            <h1>People</h1>
        </header>
        <article>
            {{outlet}}
        </article>
    </div>    
</script>

<script type="text/x-handlebars" data-template-name="people">
    <ul>
        {{#each controller}}
            <li>
                {{firstName}} {{lastName}}
                <a class="btn" {{action deletePerson href="true"}}>Delete</a>
            </li>
            
        {{/each}}
    </ul>
    <hr/>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="confirmation">
    <h3>Are you sure?</h3>
    {{view App.ConfirmView}}
    
    <a class="btn" {{action cancel href="true"}}>Cancel</a>
</script>
<script type="text/x-handlebars" data-template-name="confirm">  
    <a class="btn btn-danger" {{action goHome href="true"}}>Yes</a>
</script>

CSS

h1 {
    font-size:20px;
    padding-bottom:20px;
}

JavaScript

App = Ember.Application.create();



/*
 * Routing
 */
App.Router = Ember.Router.extend({

    enableLogging: true,

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'people.index.list',
        }),
        people: Ember.Route.extend({
            route: '/people',
            cancel: Ember.Route.transitionTo('rollback'),
            confirm: Ember.Route.transitionTo('destroy'),
            
            // Event to transition to the index
            goHome: Ember.Route.transitionTo('index.list'),

            index: Ember.Route.extend({
                route: '/',
                deletePerson: Ember.Route.transitionTo('delete'),

                list: Ember.Route.extend({
                    route: 'list',
                    connectOutlets: function(router, person) {
                        console.log("in root > people > index");
                        router.get("applicationController").connectOutlet('people', App.Person.find());
                    },
                }),
                
                delete: Ember.Route.extend({
                    route: ':person_id/delete',
                    connectOutlets: function(router, person) {
                        router.get("peopleController").connectOutlet('confirmation', person);
                    },
                    exit: function(router) {
                        router.get("peopleController").set('view', null);
                    }
                }),

            }),

            rollback: Ember.Route.extend({
                route: '/rollback',
                connectOutlets: function(router) {
                    router.getPath("store.defaultTransaction").rollback();
                    /////////////////////////////////////////////////////////
                    // navigate back to the index route using transitionTo //
                    /////////////////////////////////////////////////////////
                   ...