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.

by sgterban

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>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post">
    <div><h5>{{title}}<h5><div>
        <div>{{text}}</div>
</script>

CSS

.active {
    color:green
}

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.PostRoute = Ember.Route.extend({
    model:function(params) {
        return App.BlogData.findProperty('id', params.post_id);
    }
});
        
App.BlogView = Ember.View.extend({
    classNames:['blog'] 
});