Custom ember.js template

by mgrassotti

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="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h2>App</h2>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="posts">
    <h3>Posts</h3>
    {{#each post in controller}}
      <h4><a {{action showPost post href=true}}>{{post.title}}</a></h4>
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="post">
    <a {{action goBack this href=true}}>back</a>
    <h3>Post:</h3>
    <p>
        {{title}}
    </p>
</script>

JavaScript

App = Ember.Application.create({});

//MODEL
App.Summary = DS.Model.extend({
    content: DS.attr('string')
});
App.Post = DS.Model.extend({
    title: DS.attr('string'),
    summary: DS.hasMany(App.Summary, {embedded: true})
});

App.Post.FIXTURES = [
    {id:'1', title: 'My first post', summary: [{id:1, content: 'This is summary1'}]},
    {id:'2', title: 'Another post' , summary: [{id:2, content: 'This is summary2'}]},
    {id:'3', title: 'Yet another post' , summary: [{id:3, content: 'This is summary3'}]}
];

//STORE
App.store = DS.Store.create({
  revision: 4,
  adapter: DS.fixtureAdapter
});

//ROUTER
App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'posts'
        }),
        posts: Ember.Route.extend({
            route: '/posts',
            showPost: Ember.Route.transitionTo('post'),
            connectOutlets: function(router){
               router.get('applicationController').
                   connectOutlet('posts',App.Post.find());
            }
        }),
        post: Ember.Route.extend({
            route: '/posts/:post_id',
            goBack: Ember.Route.transitionTo('posts'),
            connectOutlets: function(router, post) {
                router.get('applicationController').connectOutlet('post', post);
            }
        })
    })
});

//CONTROLLERS - VIEWS
App.ApplicationController = Ember.Controller.extend({});
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.PostsController = Ember.ArrayController.extend({
});
App.PostsView = Ember.View.extend({
    templateName: 'posts'
});

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

App.initialize();