Ember.js

// you can see demo from below link

http://jsfiddle.net/PL2gf/1/

//some pratice , show what can ember do

//Datas

var posts = [
    {
        id: 1,
        title: "first post",
        comments: [
            {
                content: "comment 1-1"
            },
            {
                content: "comment 1-2"
            }
        ]
    },
    {
        id: 2,
        title: "second post",
        comments: [
            {
                content: "comment 2-1"
            },
            {
                content: "comment 2-2"
            }
        ]
    },
    {
        id: 3,
        title: "third post",
        comments: [
            {
                content: "comment 3-1"
            },
            {
                content: "comment 3-2"
            }
        ]
    }
];

var topNews = [
    {
        title: "My life for aiur"
    },
    {
        title: "Show me the money"
    }
];


var messages = [
    {
        text:"message1"
    },
    {
        text:"message2"
    }
];



//app


App = Ember.Application.create();


//router map

App.Router.map(function() {
 
    this.resource('site',  {path: "/"});
    this.resource('posts');
    this.resource('post',{path: '/post/:post_id'});
 
});


//router & controller


//main controller

App.ApplicationController = Ember.ArrayController.extend({
 
    searchPlaceholder: "layout search"
 
});


//site

App.SiteRoute = Ember.Route.extend({
 
    model: function(){
        return messages;
     
        //here allow use getJSON  (ember compute after async)
        //return $.getJSON('post/models');
    },
 
    setupController: function(controller, model){
        controller.set("model", model);
        controller.set("welcomeText", "Hellow world!");
     
        //here disallow use getJSON  (async true)
    }
 
});



//posts
App.PostsRoute = Ember.Route.extend({
    model:function(){
        return Ember.RSVP.hash({
            posts: posts,
            topNews: topNews
        });
     
    }
});


App.PostsController = Ember.ObjectController.extend({
    countNews: function(){
     
        return this.get("topNews.length");
     
    }.property("topNews.length"),
    new_news:"",
    addNews: function(){
     
        var topNews = this.get("topNews");
     
        topNews.addObject({
            title: this.get("new_news")
        });
     
        this.set("new_news", "");
    },
    removeNews: function(news){
        this.get("topNews").removeObject(news);
    }
 
});



//post
App.PostRoute = Ember.Route.extend({
    model:function(params){
        return posts.findBy("id", parseInt(params.post_id, 10));
    }
});

App.PostController = Ember.ObjectController.extend({
 
    commentsVisible: false,
    showComments: function(){
        this.set("commentsVisible", true);
    },
    hideComments: function(){
        this.set("commentsVisible", false);
    },
    formattedTitle: function(){
     
        return this.get("model").title + " formatted";
    }.property("formattedTitle")
 
});


templates

<!--layout-->

<script type="text/x-handlebars">
 
    <div style="padding: 50px;">
        {{input type="search"  placeholder=searchPlaceholder  }}
     
        no working,  just let you know where put the layout

        {{outlet}}
    </div>
 
</script>



<!--site-->

<script type="text/x-handlebars" id="site">

<h1>{{welcomeText}}</h1>

<section>
    {{input type="text" value=welcomeText class="edit-welcome" }}
    <span>try edit it!</span>  
</section>

<section>
    <ul class="messages">
        {{#each}}
            <li>{{text}}</li>
        {{/each}}      
    </ul>  
</section>

<section>
    <div>
        {{#link-to "posts"}}
            link to the posts
        {{/link-to}}
    </div>
</section>

</script>


<!--posts-->

<script type="text/x-handlebars" id="posts">

    <br/>
    {{#link-to "site"}}
        back
    {{/link-to}}
    <br/>
    <section>
        <ul>
            {{#each posts}}
                <li>
                    {{#link-to "post" this.id}}
                        {{title}}
                    {{/link-to}}
                </li>
            {{/each}}
        </ul>

    </section>

    <section>

        <ul>
            {{#each model.posts itemController="post"}}

                <li>
                    {{#link-to "post" this}}

                        {{formattedTitle}}

                    {{/link-to}}
                </li>


            {{/each}}
        </ul>

    </section>

    <section>

        <p>has: {{countNews}} news</p>

        <ul>
            {{#each news in model.topNews}}

            <li>
                <span>{{news.title}}</span>
                <button {{action "removeNews" news}}>
                    remove
                </button>

            </li>


            {{/each}}
        </ul>



        {{input type="text" value=new_news}}
        <button {{action "addNews"}}>
            add news
        </button>

    </section>

</script>

<!--post-->

<script type="text/x-handlebars" id="post">

        <br/>

    {{#link-to "posts"}}

    back

    {{/link-to}}

    <br/>


    <div class="post">

        <h2 class="title">{{title}}</h2>


        {{#if commentsVisible}}

            {{#each comments}}
                <p>{{content}}</p>
            {{/each}}

            <button {{action "hideComments"}}>
                hideComments
            </button>

        {{else}}

            <button {{action "showComments"}}>
                showComments
            </button>

        {{/if}}

    </div>

</script>