JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<form action="#" data-bind="submit: submit">
    
    <div>
        <label>Name</label>
        <input type="text" value="couch" name="name" data-bind="initialValue, value: chair.name" />
    </div>
    
    <div>
        <label>Size</label>
        <input type="text" value="big" name="size" data-bind="initialValue, value: chair.size" />
    </div>
    
    <div>
        <label>Width</label>
        <input type="text" value="6" name="width" data-bind="initialValue, value: chair.width" />
    </div>
    
    <div>
        <label>Height</label>
        <input type="text" value="2" name="hegiht" data-bind="initialValue, value: chair.height" />
    </div>
    
    <div>
        <button type="submit">Submit</button>
    </div>
    
</form>

CSS

label {
    display: block;
}

JavaScript

ko.bindingHandlers.initialValue = {
        
    init: function(element, valueAccessor, allBindings) {
        var bindings = allBindings();
        if (bindings.value) {
            bindings.value($(element).val());
        }
    }
};

var Chair = function (obj) {
    if (typeof obj === 'object') {
        this.name(obj.name);
        this.size(obj.size);
        this.width(obj.width);
        this.height(obj.height);
    }
};

_.extend(Chair.prototype, {
    name: ko.observable(''),
    size: ko.observable(''),
    width: ko.observable(0),
    height: ko.observable(0)
});

var ChairView = function () {
    this.chair = new Chair();
};

_.extend(ChairView.prototype, {
    submit: function () {
        console.log('submitted the form', {
            name: this.chair.name(),
            size: this.chair.size(),
            width: this.chair.width(),
            height: this.chair.height()
        });
    }
});

ko.applyBindings(new ChairView(), document.body);