JSFiddle - React, Tailwind, and code Playground

by pauldechov

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="posts">
    {{#each post in controller}}
        {{#with post}}
            {{view view.itemViewClass}}
        {{/with}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="post-item">
    <a {{action gotoPost this href=true}}>
        <p>post_id: {{id}}</p>
        <p>title: {{title}}</p>
    </a>
</script>

<script type="text/x-handlebars" data-template-name="post">
    <p>post id: {{id}}</p>
    <p><a {{action gotoComments this href=true}}>comments</a> <strong>(causes infinite loop in routing mechanism! see log)</strong></p>
</script>

<script type="text/x-handlebars" data-template-name="comments">
    <h3>Comments:</h3>
</script>

JavaScript

App = Em.Application.create({});

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    text: DS.attr('string')
});

App.Comment = DS.Model.extend({
    post_id: DS.belongsTo('App.Post'),
    text: DS.attr('string')
});

App.Post.FIXTURES = [
    {
        id: 1,
        title: 'First post'
    }
];

App.store = DS.Store.create({
    revision: 4,
    adapter: DS.FixtureAdapter.create({})
});


App.ApplicationController = Em.Controller.extend({});
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

App.PostsController = Em.ArrayController.extend({});
App.PostsView = Em.View.extend({
    templateName: 'posts',
    tagName: 'ul',
    itemViewClass: Em.View.extend({
        templateName: 'post-item',
        tagName: 'li'
    })
});

App.PostController = Em.ObjectController.extend({});
App.PostView = Em.View.extend({
    templateName: 'post'
});

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'none',

    root: Em.Route.extend({
        
        index: Em.Route.extend({
            route: '/',
            redirectsTo: 'posts.list'
        }),
        
        posts: Em.Route.extend({
            route: '/posts',
            gotoPost: Em.Route.transitionTo('post.show'),
            gotoComments: Em.Route.transitionTo('post.comments'),
                    
            list: Em.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    router.get('applicationController').connectOutlet('posts', App.Post.find());
                },
            }),
            post: Em.Route.extend({
                route: '/:post_id',
                
                connectOutlets: function(router, post) {
                    router.get('applicationController').connectOutlet('post', post);
                },
            
                show: Em.Route.extend({
                    route: '/'
                }),
                comments: Em.Route.extend({
                   ...