Ember Latest App Template

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>

{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="home">
    <h2>home</h2>
    <a {{action goToAbout}}>go to about</a>
</script>

<script type="text/x-handlebars" data-template-name="about">
    <h2>about</h2>
    <a {{action goToHome}}>go to home</a>
</script>

CSS

body {
  padding: 2em;   
}

JavaScript

App = Ember.Application.create();

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

App.HomeView = Ember.View.extend({
    templateName: 'home'
});

App.AboutView = Ember.View.extend({
    templateName : 'about'
});

App.ApplicationController = Ember.ObjectController.extend({

});

App.Router = Ember.Router.extend({
    goToAbout : Ember.Route.transitionTo( 'root.about.index' ),
    goToHome : Ember.Route.transitionTo( 'root.index' ),
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('home');
            }
        }),
        about: Ember.Route.extend({
            index: Ember.Route.extend({
                route: '/about',
                connectOutlets: function(router, context) {
                    router.get('applicationController').connectOutlet('about');
                }
            })
        }),
        posts : Ember.Route.extend( {
            index : Ember.Route.extend( {
                route : '/posts'            
            } )
           
        } ),
         post : Ember.Route.extend({
                route : '/post/:postId' 
            } )
    })
});