Ember.js 0.9.3 template

by ppanagi

HTML

<script src="https://raw.github.com/lukemelia/jquery-ui-ember/master/js/libs/jquery-ui-1.9pre.js"></script>
<script src="http://www.dynopia.com/js/ember_latest.js"></script>
<script type="text/x-handlebars" data-template-name="profile">

  Check out my profile!
  <ul>
      <li><a {{action viewPosts href="true"}}>My Posts</a></li>
      <li><a {{action viewPhotos href="true"}}>My Photos</a></li>
  </ul>
  {{outlet section}}
</script>
<script type="text/x-handlebars" data-template-name="posts">
  Viewing posts...
</script>
<script type="text/x-handlebars" data-template-name="photos">
  Viewing photos...
</script>

<script type="text/x-handlebars" data-template-name="footer">
    <div style="margin-top:50px">
  My footer
  <h1 id="time">The time is <strong>{{view.timeNow}}</strong></h1>
    (current time is updated each time you switch to a new URL because the footer is re-rendered when the change of URL is not handled by the router)
    </div>
</script>
<script type="text/x-handlebars" data-template-name="application">
  <div class="content">
    {{outlet}}
  </div>
  <div class="bottom">
      {{outlet footer}}
   </div> 
</script>

CSS

body {
  padding: 2em;   
}

h1 { font-size: 2em; }

a {  
  color: blue;
  cursor: pointer;
}

.content {
  padding: 1em;   
}

JavaScript

App = Em.Application.create();

// Instantiated and wired up for you in App.initialize()
App.ApplicationController = Em.Controller.extend();
App.ApplicationView       = Em.View.extend({ 
    templateName: 'application'
});
// Your stuff
App.HomeController    = Em.Controller.extend({});
App.HomeView          = Em.View.extend({ templateName: 'home' });

App.ProfileController = Em.Controller.extend({});
App.ProfileView       = Em.View.extend({ 
    templateName: 'profile'
                                        
});

// Nested views in the profile
App.PostsController = Em.Controller.extend({});
App.PostsView       = Em.View.extend({ templateName: 'posts' });

App.FooterController = Em.Controller.extend({});
App.FooterView       = Em.View.extend({ 
    templateName: 'footer',
    timeNow: function(){
        var d = new Date();

        var curr_hour = d.getHours();
        var curr_min = d.getMinutes();
        var curr_sec = d.getSeconds();
        return curr_hour + ":" + curr_min + ":" + curr_sec ;                
    }.property()
});

App.PhotosController = Em.Controller.extend({});
App.PhotosView       = Em.View.extend({ templateName: 'photos' });

App.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',
    
  root: Em.Route.extend({
    
    // STATES
    profile: Em.Route.extend({
      route: '/',
      connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet('profile');
        router.get('applicationController').connectOutlet({ outletName:'footer', name: 'footer'});

      },
       
        dummy: Em.Route.extend({
            route: '/'

        }),            
      
      // STATES
      viewPosts: Ember.State.transitionTo('posts'),
      posts: Em.Route.extend({
        route: '/posts',
        connectOutlets: function(router, context) {
            router.get('profileController').connectOutlet({ outletName:'section', name: 'posts'});
        }
      }),

      viewPhotos:...