JSFiddle - React, Tailwind, and code Playground

by fractaloop

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="flow/templates/application">
    <h1>Flow: {{flow.name}}</h1>
    {{outlet graph}}
    {{outlet inspector}}
</script>
<script type="text/x-handlebars" data-template-name="flow/templates/graph">
    <ul>
        {{#each content.stages}}
            {{view App.StageView contentBinding="this"}}
        {{/each}}
    </ul>
</script>
<script type="text/x-handlebars" data-template-name="flow/templates/stage">
    <li><a {{action goInspect context="this" target="controller"}}>{{name}}</a></li>
</script>
<script type="text/x-handlebars" data-template-name="flow/templates/inspector">
    <h3>Inspector</h3>
    {{selectedStage.name}} ({{selectedStage.id}})
</script>
<div id="flow"></div>

CSS

.inspector { background-color: #ddd; }
.graph { border: 2px solid grey; }

JavaScript

App = Em.Application.create({
    rootElement: '#flow'
});

App.Stage = DS.Model.extend({
    flow: DS.belongsTo('App.Flow'),
    name: DS.attr('string')
});
App.Stage.FIXTURES = [
    {
    id: 2001,
    name: "Reader"},
{
    id: 2002,
    name: "Writer"}
];
App.Flow = DS.Model.extend({
    name: DS.attr('string'),
    stages: DS.hasMany('App.Stage', {
        embedded: true
    })
});
App.Flow.FIXTURES = [
    {
    "id": 1001,
    "name": "Twitter",
    "stages": [
        {
        id: 2001,
        name: "Reader"},
    {
        id: 2002,
        name: "Writer"}
    ]}
];

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

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

App.GraphController = Em.Controller.extend({
    selectedStage: null,
    goInspect: function(event) {
        this.set('selectedStage', event.context);
    }
});
App.GraphView = Em.View.extend({
    classNames: ['graph'],
    templateName: 'flow/templates/graph'
});

App.StageController = Em.Controller.extend()
App.StageView = Em.View.extend(Ember.TargetActionSupport, {
    templateName: 'flow/templates/stage'
})

App.InspectorController = Em.Controller.extend({
    selectedStageBinding: 'App.GraphController.selectedStage'
});
App.InspectorView = Em.View.extend({
    classNames: ['inspector'],
    templateName: 'flow/templates/inspector'
});

App.StageProxy = Em.ObjectProxy.extend({
    content: function() {
        return this.get('content').toUpperCase();
    }.property('content')
});

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

    root: Em.Route.create({
        index: Em.Route.extend({
            route: '/',
            goShow: function(router, context) {
                router.transitionTo('show', context);
            }
        }),

        show: Em.Route.extend({
            route: '/:flow_id',
            modelType:...