Ember router exemple2

by gnepud

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>My Ember Application</h1>
    
    <a {{action goHome}}>Home</a> ~
    <a {{action viewPost}}>Post</a> ~    
    <a {{action viewComments}}>Post/comments</a>
    
    <p class="info">
        Clicking "post" then "post/comments" works, but going directly from home to 
        "post/comments" doesn't trigger connectOutlets of the postController and 
        so doesn't set the applicationController outlet and you don't see a change.
    </p>
    
    <div class="content">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="home">
  <h2>Home</h2>
</script>

<script type="text/x-handlebars" data-template-name="post">
  <h2>A Post</h2>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="comments">
    <p>Comments would go here</p>
</script>

CSS

body {
  padding: 2em;   
}

h1 { font-size: 2em; }

a {  
  color: blue;
  cursor: pointer;
}

.content {
  padding: 1em;   
}


p.info {
    padding: 1em 0;
}

JavaScript

App = Em.Application.create();

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

App.HomeController = Em.Controller.extend();
App.HomeView = Em.View.extend({templateName: 'home' });

App.PostController = Em.Controller.extend();
App.PostView       = Em.View.extend({ templateName: 'post' });

App.CommentsController = Em.Controller.extend();
App.CommentsView       = Em.View.extend({ templateName: 'comments' });

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    
    root: Em.Route.extend({
         // EVENTS
        goHome: Ember.Route.transitionTo('home'),
        viewPost: Ember.Route.transitionTo('post'),
        viewComments: Ember.Route.transitionTo('post.comments'),
      
        // STATES
        home: Em.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet("home");
            }
        }),
      
        post: Em.Route.extend({
            route: '/post',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet("post");
            },
          
            comments: Em.Route.extend({
                route: '/comments',
                connectOutlets: function(router, context) {
                    router.get('postController').connectOutlet("comments");
                }
            })
        })
    })
});

App.initialize();