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>

JavaScript

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

App.metaData = Em.Object.create({
    protocols: [
        {
        Name: "test",
        Version: "2",
        Devices: [
            {
            Description: "testdev",
            Type: 4},
        {
            Description: "testdev",
            Type: 5},
            ]}
    ],
});

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">{{content.Description}} {{content.Type}}</div>'),
        mouseEnter: function(e) {
            $(e.target).addClass('hover');
        },
        mouseLeave: function(e) {
            $(e.target).removeClass('hover');
        },
        click: function(e) {}
    }),
    deviceParameters: Em.CollectionView.extend({
        contentBinding: ''
    })
});

App.SelectDevices = Em.ContainerView.extend({
    childViews: [Em.View.create({
        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,
    })
});

App.SelectProtocol = Em.ContainerView.extend({
    childViews: [Em.View.create({
        template: Em.Handlebars.compile('<div class="selectprotocol-title">Select!: </div>'),
    }), 'selectableProtocols'],
    selectableProtocols: Em.CollectionView.extend({
        contentBinding: 'App.metaData.protocols',
        templateName: "selectProtocol",

        itemViewClass:...