JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.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">
    <h1>Application</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="blocki" >
    {{name}}
    {{#each children}}
        {{view App.BlocksView blockiBinding="this"}}
    {{/each}}
</script>

CSS

.blocks-container {
    width: 30em;
    height: 30em;
    border:2px solid #566789;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    opacity:0.7;
    filter:alpha(opacity=80);
    margin: 0.5em;
}

.block { 
    display: block;
    float: left;
    border:1px solid #779989;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    opacity:0.8;
    filter:alpha(opacity=80);
    line-height:5em;
    text-align:center;
    z-index:20; 
    background-color:#FFC000;
    color:black;
    font-family:helvetica;
    padding:0.5em;
    margin: 0.5em;
    font-size:0.9em;
}

JavaScript

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

App.ApplicationView = Ember.View.extend({ templateName: 'application' });
App.ApplicationController = Ember.Controller.extend();
  
App.BlocksView = Ember.View.extend({
  tagName: 'div',
  classNames: ['block'],
  templateName: 'blocki'
})

App.BlocksController = Ember.ObjectController.extend();

App.testData = {
    "name": "main page",
    "children": [
        {
            "name": "Block 1",
            "children": [
                { "name": "Block 1.1" },
                { "name": "Block 1.2" }
            ]
        },
        {
            "name": "Block 2",
            "children": [
                  {
                      "name": "Block 2.1",
                      "children": [
                          {
                            "name": "Block 2.1.1",
                            "children": [
                                { "name": "Block 2.1.1.1" }
                            ]
                        }
                      ]
                  }
            ]
        }
    ]
};

App.blocksController = App.BlocksController.create();
App.blocksController.set('content', {"name": "loading..."});

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        blocks: Ember.Route.extend({
            route: "/",
            connectOutlets: function(router, context) {
                router.get("applicationController").connectOutlet("blocks", App.blocksController);
                console.log("connecting blocks outlets");
            }
        })
    })
});

//App.blocksController.set('content', App.testData);
  
App.initialize();

setTimeout(function() { window.App.blocksController.set('content', App.testData)}, 3000);
//setTimeout(populate, 3000);