JSFiddle - React, Tailwind, and code Playground

by schawaska

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type="text/x-handlebars">
    <h1>App</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="posts/index">
    <h3>Posts</h3>
    <ul>
    {{#each post in controller}}
        <li>
        {{#linkTo posts.post post}}
            {{post.title}}
        {{/linkTo}}
        </li>
    {{else}}
        <li>
            No posts
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="posts/post">
    <h3>{{title}}</h3>
    <div>by {{controller.user.fullName}}</div><hr />
    <div>
        {{body}}
    </div>
    {{partial comments}}
</script>

<script type="text/x-handlebars" data-template-name="_comments">
    <h5>Comments</h5>
    {{#each content.comments}}
    <hr />
    <span>
        {{this.body}}<br />
        <small>by {{this.author.fullName}}</small>
    </span>
    {{/each}}
</script>

<script type="text/javascript">
    window.user_id = 1;    
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<script type="text/javascript" src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script type="text/javascript" src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="https://raw.github.com/MilkyWayJoe/cdnjs/master/ajax/libs/ember-data.js/0.12.00-latest20130328/ember-data-latest.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

JavaScript

var App;

App = Ember.Application.create();

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

App.Adapter = DS.FixtureAdapter.extend();

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});

App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    email: DS.attr('string'),
    posts: DS.hasMany('App.Post', {
        embedded: true
    }),
    comments: DS.hasMany('App.Comment', {
        embedded: true
    }),
    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', {
        embedded: true
    }),
    comments: DS.hasMany('App.Comment', {
        embedded: true
    })
});

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

App.PostsRoute = Em.Route.extend({
    model: function() {
        return App.Post.find();
    },
    setupController: function(controller, model) {
        controller.set('content', model);
    }
});

App.PostsIndexRoute = Em.Route.extend({
    setupController: function(controller, model) {
        controller.set('content', this.modelFor('posts'));
    }
});

App.PostsPostRoute = Em.Route.extend({
    model: function(params) {
        return App.Post.find(params.post_id);
    },
    setupController: function(controller, model) {
        controller.set('content', model);
        controller.set('user', App.User.find(1));
    }
});

App.IndexRoute = Em.Route.extend({
    redirect: function() {
        this.transitionTo('posts.index');
    }
});

App.PostsIndexController = Em.ArrayController.extend();

App.User.FIXTURES = [
    {
     ...