JSFiddle - React, Tailwind, and code Playground

by albertjan

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<div id="newOrder"></div>

CSS

div {
    margin-left:10px;
    border: 1px solid black;
}

JavaScript

App = Em.Application.create({
    rootElement: $("#newOrder"),
});

App.metaData = Em.Object.create({
    protocols: [
        {
        Name: "Click here!",
        Version: "2",
        Devices: [
            {
            Description: "testdev",
            Type: 4,
            Things:[
                { Name: "thingie1" },
                { Name: "thingie2" },
                { Name: "thingie3" }
            ]},
            {
            Description: "testdev",
            Type: 5,
            Things:[
                { Name: "thingie4" },
                { Name: "thingie2" },
                { Name: "thingie3" }
            ]}
        ],
        }
    ]
});

App.PlaceableOrder = Em.Object.extend({
    selectedProtocol: undefined,
    protocolSelected: false,
    selectedProtocolObserver: function() {
        this.set('protocolSelected', true);
    }.observes('selectedProtocol')
});

App.DeviceEditor = Em.ContainerView.extend({
    childViews: ['deviceDescr', 'deviceParameters'],
    deviceDescr: Em.View.extend({
        templateName: 'selectableDevice',
        template: Em.Handlebars.compile('<div class="selectable-device">{{parentView.content.Description}} {{parentView.content.Type}}</div>'),
    }),
    deviceParameters: Em.CollectionView.extend({
        templateName: 'devParams',
        contentBinding: 'parentView.content.Things',
        itemViewClass: Em.View.extend({
            template: Em.Handlebars.compile('A: {{content.Name}}')
        }),
        //didInsertElement: function(){
        //    alert("?");
        //}
    })
});

App.SelectDevices = Em.ContainerView.extend({
    childViews: [Em.View.extend({
        template: Em.Handlebars.compile('<div class="selectprotocol-title">Select!: </div>'),
    }), 'selectableDevices'],
    selectableDevices: Em.CollectionView.extend({
        contentBinding: 'App.order.placeableOrder.selectedProtocol.Devices',
        templateName: "selectDevices",
        itemViewClass: App.DeviceEditor,
   ...