Ember.js Starter Kit

Based on latest version (as of today) of the official Ember.js starter kit: https://github.com/emberjs/starter-kit Links to latest full-size versions of Handlebars, Ember, and Ember-Data.

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBhQQDxIREhIVFBUQFRUVFxcVFRQPEBcSFBYVGhUQFBUYHCYeFxkkGRQUHzAiLycpLCwtFh8zNTAsNSctLCkBCQoKBQUFDQUFDSkYEhgpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKf/AABEIAKAAoAMBIgACEQEDEQH/"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Introduction to Ember Router v2</h1>
    <nav>
        {{#linkTo "index"}}Home{{/linkTo}}
        {{#linkTo "blog"}}Blog{{/linkTo}}
    </nav>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h5>Welcome to our web site</h5>
</script>

<script type="text/x-handlebars" data-template-name="blog">
    <h5>Company Blog</h5>
    <ul>
        {{#each item in content}}
        <li>{{#linkTo "post" item}}{{item.title}}{{/linkTo}}</li>
        {{/each}}
    </ul>
    <hr>
    {{outlet}}
    <hr>
        {{#linkTo "index"}}Go Back Home{{/linkTo}}
</script>    

<script type="text/x-handlebars" data-template-name="post">
    <h5>{{title}}</h5>
    <p>{{text}}</p>
</script>

CSS

body {
    padding: 24px 36px;
}

h1 {
    font-size: 18px;
}

nav > a {
    display: inline-block;
    background: transparent;
    border-radius: 12px;
    padding: 0 8px;
    margin-right: 12px;
}

nav > a.active {
    background: #999;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    color: white;
}

.myoutlet {
    padding: 36px 48px;
    margin-top: 8px;
    background: #f4f6fc;
}

ul > li {
    margin-bottom: 8px;
}

JavaScript

var App = Ember.Application.create();

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

App.BlogData =  [
        Ember.Object.create({
            id:"1",
            title:"CSS Media queries",
            text:"CSS Media queries are great for responsive web             design, though I've found they aren't perfect."
        }),
        Ember.Object.create({
            id:"2",
            title:"Javascript frameworks",
            text:"Javascript frameworks are the best, anyone not using them is crazy!"
        }),
        Ember.Object.create({
            id:"3",
            title:"Ember.js",
            text:"With ember passing context is very easy and very intuitive"
        })
    ];


App.BlogRoute = Ember.Route.extend({
    model:function() {
        return App.BlogData;  
    }
});
        
App.BlogView = Ember.View.extend({
    classNames:['blog','myoutlet'] 
});

App.PostRoute = Ember.Route.extend({
    model: function(param) {
        return App.BlogData.findProperty("id",params.post_id);
    }
});