JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{partial 'navbar'}}
    {{outlet}}   
    {{partial 'footer'}}
</script>

<script type="text/x-handlebars" data-template-name="_navbar">
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
            {{#linkTo "app" class="brand"}}{{unbound App.app_title}}{{/linkTo}}
            <ul class="nav">
                {{#linkTo "app" tagName="li"}}
                    <a {{bindAttr href="view.href"}}>Home</a>
                {{/linkTo}}
                {{#linkTo "products" tagName="li"}}
                    <a {{bindAttr href="view.href"}}>Products</a>
                {{/linkTo}}
            </ul>
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="_footer">
    <div class="row">
        <div class="span12">
            &copy; 2013:1.0-pre4 - {{unbound App.contact}} 
        </div>
    </div>    
</script>

<script type="text/x-handlebars" data-template-name="app">
    <h2>Home</h2>
    <p>Bacon ipsum dolor sit amet tenderloin short ribs short loin meatball sausage chicken pastrami. Hamburger sausage tri-tip, bacon spare ribs bresaola short ribs chuck frankfurter shoulder. Fatback pork belly turducken, ham drumstick salami hamburger pork sausage. Jowl corned beef andouille shank boudin. Shankle salami corned beef, pastrami leberkas turducken venison shoulder fatback jowl ball tip ground round biltong andouille boudin.</p>
    <p>Biltong boudin turkey rump shankle ball tip, strip steak...

CSS

a {cursor: pointer}

JavaScript

// Extensions - Begin

/*
All extensions to Ember, such as adding a plugin, handlebars helpers, creating
base classes based on Ember, etc, should be here, before you call `Em.Application.create()`
*/

/* 
Since you can't have computed properties defined in instance objects, and for most
applications the only instance we create manually is the application itself, I'm purposely
extending `Em.Application` in order to have a computed property in my App. This might not
be the best example for it tho, because in reality you don't need this computed property.
*/
var BaseApp = Em.Application.extend({
    app_title: 'Auto Web Shop',
    contact: function() {
        if(this.get('link') !== '') {
            var html = '<a href="%@" target="_blank">%@</a>'
                       .fmt(this.get('link'), this.get('author'));
            return new Handlebars.SafeString(html);
        } else {
            return this.get('author');
        }
    }.property('author', 'link') 
});

// Extensions - End

window.App = BaseApp.create({
    author: 'Your Name Here',
    link: 'https://twitter.com/torontoemberjs'
});

// Controllers - Begin

App.ShopController = Em.ArrayController.extend();
App.ProductsController = Em.ArrayController.extend();
App.ProductsIndexController = Em.ArrayController.extend();
App.CategoriesController = Em.ArrayController.extend();

// Controllers - End

// Routes - Begin

App.Router.map(function() {
    this.resource('app');
    this.resource('products', function() {
        this.route('product', {path: 'product/:product_id'});
        this.route('category', {path: 'category/:category_id'})
    });
});

App.ApplicationRoute = Em.Route.extend({
    activate: function() {
        $(document).attr('title', 'Auto Web Shop');
    },
    setupController: function() {
        this.controllerFor('categories').set('model', App.Category.find());
    }
});

App.ProductsIndexRoute = Em.Route.extend({
    activate: function() {
        $(document).attr('title', 'Auto Web...