JSFiddle - React, Tailwind, and code Playground

by ethan_selzer

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();

App.NumberField = Ember.TextField.extend({
    classNames: ['number-field'],
    _cleanValue: function() {
        this.set('value', App.onlyNumber(this.get('value')));
    }.observes('value'),
    focusOut: function () {
        this.set('value', App.onlyNumber(this.get('value'), this.get('range')));
    }
});

App.onlyNumber = function (input, range) {
    if (input !== undefined) {
        var inp = input.toString().replace( /^[^\d\-]|(^.+)[^\d.,]|([.,].*)[.,]|(^\-)[.,]/g , "$1$2$3");
        if (range !== undefined) {
            var tmp = parseFloat(inp.replace(",", "."));
            if (!isNaN(tmp)) {
                if (tmp < range.Min) { return range.Min; }
                if (tmp > range.Max) { return range.Max; }
            }
        }
        return inp;
    }
    return input;
};

App.data = Em.Object.create({
  
        HasThreshold: true,
        Description: "TestParameter",
    Parameters : [ {
        ExternalID: "00000000000000000000000000000000",
        Range: {
            Min: "30",
            Max: "200"
        },
        Unit: "mmHg",
        Question: "Wat is de hoogste geaccepteerde diastolisch bloeddruk van de patient?",
        ValueType: "int"
    } ]
});

App.Order = Em.View.extend({
    contentBinding: 'App.data',
    template: Em.Handlebars.compile('{{content.Description}}' +
                                    '{{#if content.HasThreshold}}' +
                                    '{{#each content.Parameters}}' +
                                        '{{Question}}' + 
                                        '{{view App.NumberField valueBinding="Question" rangeBinding="Range"}}' +
                                    '{{/each}}' +
                                    '{{/if}}')
});

App.order = App.Order.create().append()