Ember Latest - Reopen Route

by ethan_selzer

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="app">
<h1>App</h1>
<a {{action goToHome href=true}}>home</a> | <a {{action goToAbout href=true}}>about</a>
    | <a href=#/post/12>post 12</a>
{{outlet}}
</script>

CSS

body {
  padding: 2em;   
}

JavaScript

App = Ember.Application.create({
    //autoInit : false
});

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

App.PageController = Ember.Controller.extend();

App.PageView = Ember.View.extend({
    template: Ember.Handlebars.compile('<h2>{{content.copy}}</h2>')
});

App.Router = Ember.Router.extend({
    //enableLogging: true,
    goToHome: Ember.Route.transitionTo('root.home'),
    goToAbout: Ember.Route.transitionTo('root.about'),
    goToPost: Ember.Route.transitionTo('root.post'),
    root: Ember.Route.extend({
        home: Ember.Route.extend({
            route: '/',

            redirectsTo: 'root.posts'
        }),
        about: Ember.Route.extend({
            route: '/about',
            enter: function(router) {
                console.log('enter in root.about');
            },
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('page', {
                    copy: 'about'
                });
            },
            init: function() {
                console.log('in root.about init');
                this._super(this, arguments);
            }
        }),
        posts: Ember.Route.extend({
            route: '/posts',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('page', {
                    copy: 'posts'
                });
            }

        }),
        post: Ember.Route.extend({
            route: '/post/:postId',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('page', {
                    copy: 'post ' + context.postId
                });
            },
            deserialize: function(router, context) {
                return context;
            },
            serialize: function(router, context) {
                return {
                   ...