JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type="text/x-handlebars">
    {{partial navbar}}
    <div style="height: 45px" class="visible-desktop">&nbsp;</div>
    <header class="jumbotron subhead" id="overview">
        <div class="container">
            Blog tagline goes here
        </div>
    </header>  
    <div class="container">
        {{outlet}}
    </div>    
</script>

<script type="text/x-handlebars" data-template-name="_navbar">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                {{#linkTo posts class="brand"}}
                Blog
                {{/linkTo}}
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        {{#linkTo posts tagName=li}}
                        <a {{bindAttr href="view.href"}}>Blog</a>
                        {{/linkTo}}
                        {{#linkTo tags.index tagName=li}}
                        <a {{bindAttr href="view.href"}}>Tags</a>
                        {{/linkTo}}
                        {{#linkTo about tagName=li}}
                        <a {{bindAttr href="view.href"}}>About</a>
                        {{/linkTo}}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="posts/index">
    <h4>Latest Posts</h4>
    <ul>
        {{#each post in controller}}
            <li>
               {{#linkTo posts.post post}}
                   <i class="icon-star"></i> 
                   {{post.title}}
               {{/linkTo}}
 ...

CSS

a:hover {cursor: pointer}
.label > a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

JavaScript

window.App = Ember.Application.create();

/****************************************************
ROUTER AND STORE SETUP
****************************************************/

App.Router.map(function() {
    this.route('about');
    this.resource('posts', { path: 'blog' }, function() {
        this.route('post', { path: ':post_id/:title' });
    });
    this.resource('tags', function() {
        this.route('tag', { path: '/:tag_name' });
    });
});

App.Store = DS.Store.extend({
    revision: 12
});

/****************************************************
MODELS
****************************************************/
App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    email: DS.attr('string'),
    posts: DS.hasMany('App.Post'),
    comments: DS.hasMany('App.Comment'),
    fullName: function() {
        return '%@ %@'.fmt(this.get('firstName'), this.get('lastName'))
    }.property('firstName', 'lastName')
});

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    author: DS.belongsTo('App.User'),
    tags: DS.hasMany('App.Tag'),
    comments: DS.hasMany('App.Comment'),
    commentsCount: function() {
        return this.get('comments.length');
    }.property('comments.@each')
});

App.Tag = DS.Model.extend({
    name: DS.attr('string'),
    posts: DS.hasMany('App.Post'),
    postsCount: function() {
        return this.get('posts.length');
    }.property('posts.@each')
});

App.Comment = DS.Model.extend({
    body: DS.attr('string'),
    post: DS.belongsTo('App.Post'),
    author: DS.belongsTo('App.User')
});

/****************************************************
ROUTES
****************************************************/

App.AboutRoute = Em.Route.extend();

App.PostsRoute = Em.Route.extend({
    model: function() {
        return App.Post.find();
    }
});

App.PostsIndexRoute = Em.Route.extend({
    model: function() {
        return this.modelFor('posts');
   ...