JSFiddle - React, Tailwind, and code Playground

by albertjan

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>
<div id="newOrder"></div>

JavaScript

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

App.SelectProtocol = Em.ContainerView.extend({
    childViews: [Em.View.create({ classNames: ['selectprotocol-title'], template: Em.Handlebars.compile('<h2>Selecteer een behandelprotocol:</h2>'), }), 'selectableProtocols'],
    selectableProtocols: Em.CollectionView.extend({
        classNames: ['selectable-protocols'],
        contentBinding: 'App.metaData.protocols',
        templateName: "selectProtocol",

        itemViewClass: Em.View.extend({
            classNames: ['selectable-protocol'],
            templateName: 'selectableProtocol',
            template: Em.Handlebars.compile('{{content.name}} (Versie: {{content.version}})'),
            didInsertElement: function(){
                alert(this.get('content').name);            
            },
            mouseEnter: function(e) {
                $(e.target).addClass('hover');
            },
            mouseLeave: function(e) {
                $(e.target).removeClass('hover');
            },
            click: function(e) {
                $('.selected').removeClass('selected');
                $(e.target).addClass('selected');
                App.order.placeableOrder.set('selectedProtocol', this.get('content'));
            },
        }),
    })
});

App.metaData = Em.Object.create({
    protocols: JSON.parse('[{"__type":"Curit.Telemedicine.Module.Presentation.IDataProxy.Schema.Protocol, Curit.Telemedicine.Module.Presentation.IDataProxy","protocolID":"57d6bd8009404a3b930c158a5cadd47f","parameters":[{"__type":"Curit.Telemedicine.Module.Presentation.IDataProxy.Schema.Parameter, Curit.Telemedicine.Module.Presentation.IDataProxy","externalID":"00000000000000000000000000000000","name":"Geslacht","question":"Wat is het geslacht van de patient?","deviceType":4,"optionList":[{"__type":"Curit.Telemedicine.Module.Presentation.IDataProxy.Schema.Option,...