Ember Application Structure

Example from http://emberjs.com/guides/outlets/

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>My Ember blog</title>
  </head>
  <body>
    <script data-template-name="comments" type="text/x-handlebars">
      <h1>Comments</h1>
    </script>

    <script data-template-name="app" type="text/x-handlebars">
      <h1>My Ember blog</h1>
      {{outlet}}
    </script>

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

    <script data-template-name="post" type="text/x-handlebars">
      {{#if content.isLoaded}}
    <h1>{{content.title}}</h1>
    <div class="body">
      {{content.body}}
    </div>
      {{else}}
        <p>Now loading...</p>
      {{/if}}
      {{outlet}}
      <a {{action backToList href=true}}>Back to list</a>
    </script>
  </body>
</html>

JavaScript

var App = Em.Application.create();


DS.fixtureAdapter.set('latency', 5000);
DS.fixtureAdapter.set('simulateRemoteResponse', false);

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    body : DS.attr('string')
});

App.Post.FIXTURES = [
    {
        id   : 1,
        title: 'First post',
        body : 'This is my first post!'
    },
    {
        id   : 2,
        title: 'Second post',
        body : 'This is my second post!'
    },
    {
        id   : 3,
        title: 'Third post',
        body : 'This is my thrid post!'
    },
    {
        id   : 4,
        title: 'Fourth post',
        body : 'This is my fourth post!'
    },
    {
        id   : 5,
        title: 'Fifth post',
        body : 'This is my fifth post!'
    }
];

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

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

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

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

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


App.Router = Em.Router.extend({
    enableLogging: true,
    //location: 'history',
    root: Em.Route.create({
        backToList: Em.Route.transitionTo('posts'), 
        showPost: Em.Route.transitionTo('post.index'),
        index: Em.Route.create({
            route: '/',
            redirectsTo: 'posts'
        }),
        posts: Em.Route.create({
            route: '/posts',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('posts',
                    App.post.findAll(App.Post));
            }
        }),
        post: Em.Route.create({
            route: '/posts/:post_id',
            connectOutlets: function(router, post)...