JSFiddle - React, Tailwind, and code Playground

by robgallen

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<form data-bind="with: data" role="form">
    <!-- field 1 -->
    <div class="form-group">
        <label data-bind="text: $parent.locale.fields.field1" for="field1" class="col-sm-3 control-label no-padding-right"></label>
        <div class="col-sm-9">
            <input data-bind="value: field1" type="text" name="field1" class="col-xs-10 col-sm-5" />
        </div>
    </div>
    <!-- field 2 -->
    <div class="form-group">
        <label data-bind="text: $parent.locale.fields.field2" for="field2" class="col-sm-3 control-label no-padding-right"></label>
        <div class="col-sm-9">
            <input data-bind="value: field2" type="text" name="field2" class="col-xs-10 col-sm-5" />
        </div>
    </div>
    <!-- field 3 -->
    <div class="form-group">
        <label data-bind="text: $parent.locale.fields.field3" for="field3" class="col-sm-3 control-label no-padding-right"></label>
        <div class="col-sm-9">
            <input data-bind="value: field3" type="text" name="field3" class="col-xs-10 col-sm-5" />
        </div>
    </div>
    <!-- field 4 -->
    <div class="form-group">
        <label data-bind="text: $parent.locale.fields.field4" for="field4" class="col-sm-3 control-label no-padding-right"></label>
        <div class="col-sm-9">
            <input data-bind="value: field4" type="text" name="field4" class="col-xs-10 col-sm-5" />
        </div>
    </div>
    <!-- field 5 -->
    <div class="form-group">
        <label data-bind="text: $parent.locale.fields.field5" for="field5" class="col-sm-3 control-label no-padding-right"></label>
        <div class="col-sm-9">
            <input data-bind="value: field5" type="text" name="field5" class="col-xs-10 col-sm-5" />
        </div>
    </div>
    <!-- etc... -->
</form>

JavaScript

function ExampleModel(data) {
    var self = this;
    // Note - the fields are not actually called 'fieldN'
    self.field1 = ko.observable(data.field1);
    self.field2 = ko.observable(data.field2);
    self.field3 = ko.observable(data.field3);
    self.field4 = ko.observable(data.field4);
    self.field5 = ko.observable(data.field5);
    // etc...
}

var example = new ExampleModel({
    field1: 100,
    field2: 150,
    field3: 200,
    field4: 50,
    field5: 100 // etc...
});

var ViewModel = function() {
    this.data = ko.observable(example);
    this.locale = {
        fields: {
            // these match the field names
            field1: "Field 1 label",
            field2: "Field 2 label",
            field3: "Field 3 label",
            field4: "Field 4 label",
            field5: "Field 5 label"// etc...
        }
    };
};
ko.applyBindings(new ViewModel());