JSFiddle - React, Tailwind, and code Playground

by rlivsey

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


<script type="text/x-handlebars" data-template-name="home">
    <h2>Home</h2>
    
    <a {{action goToPosts}}>Posts</a>
</script>

<script type="text/x-handlebars" data-template-name="posts">
    <h2>Posts</h2>
    <ul>
        {{#each post in controller}}
            <li><a {{action goToPost context="post"}}>{{post.title}}</a></li>
        {{/each}}
    </ul>
    
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="post">
    <h2>Post: {{content.title}}</h2>
    <p>
        {{content.description}}
    </p>
</script>

CSS

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

a { color: blue; text-decoration: underline; cursor: pointer; }

JavaScript

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

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

App.HomeController = Em.Controller.extend();
App.HomeView = Em.View.extend({templateName: 'home' });

App.PostsController = Em.ArrayController.extend({
    content: [
        Em.Object.create({title: "One", description: "one two three"}),   
        Em.Object.create({title: "Two", description: "four five six"}),        
    ]
})
App.PostsView = Em.View.extend({templateName: 'posts' });

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

App.Router = Ember.Router.extend({
    location : "hash",
    enableLogging : true,
    root: Em.State.extend({                     
        
        // global actions
        goToHome: Em.State.transitionTo("root.index"),
        goToPosts: Em.State.transitionTo("posts.index"),        
        goToPost: Em.State.transitionTo("posts.show.index"),                
        
        // states
        index : Em.State.extend({
            route : "/",
            connectOutlets: function(manager) {
                  manager.get("applicationController").connectOutlet(App.HomeView);
            }
        }),
        posts: Em.State.extend({
            route : "/posts",
            index : Em.State.extend({
                route : "/",
                connectOutlets : function(manager) {
                  manager.get("applicationController").connectOutlet(App.PostsView);
                }
            }),
            show : Em.State.extend({
                route : "/:id",
                index : Em.State.extend({
                    route : "/",
                    connectOutlets : function(manager, post) {
                        manager.get("postsController").connectOutlet(App.PostView, post);
                    }
                }),
                comments: Em.State.extend({
                    route:...