JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://gist.github.com/raw/2931791/ember.js"></script>
<script type="text/x-handlebars">
    <h1>Things</h1>
    <h2>each controller.things</h2>
    <ul>
    {{#each controllers.things}}
        <li>
            {{name}} (this: {{this}})
            <button {{action select}}>select</button>
            <button {{action select target=this}}>select target=this</button>
        </li>
    {{/each}}
    </ul>
    
    <h2>each thing in controller.things</h2>
    <ul>
    {{#each thing in controllers.things}}
        <li>
            {{thing.name}} (thing: {{thing}})
            <button {{action select}}>select</button>
            <button {{action select target=thing}}>select target=thing</button>
        </li>
    {{/each}}
    </ul>


    
</script>

CSS

h1 {
    font-weight: bold;
    font-size: 1.2em;
}

h2 {
    font-weight: bold;
}

ul {
    padding: 0.5em;
}

JavaScript

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

App.ApplicationController = Ember.Controller.extend({
    needs: "things",
    select: function() {
        console.info("select called on main controller"); 
    }
});

App.ThingItemController = Ember.ObjectController.extend({
    select: function() {
        console.info("select called on item controller");   
    }
});

App.ThingsController = Ember.ArrayController.extend({
    init: function() {
        var things = [
            Ember.Object.create({name: "one"}),
            Ember.Object.create({name: "two"})
        ];
        this.set("content", things);
    },
    itemController: "thingItem"
});