JSFiddle - React, Tailwind, and code Playground

by goranobradovic

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<form>
<fieldset>
<legend>Universal editor</legend>

    <ul data-bind="foreach:fields">
        <li data-bind="template:Template">
        </li>
    </ul>
    <input type="submit"/>
</fieldset>
</form>
<script type="text/html" id="tmpl-input">
    <label data-bind="for:Name, text:Label"></label>
    <input data-bind="name:Name, value:Value" />    
</script>

CSS

li label{
    display:inline-block;
    width: 80px;
}

JavaScript

var proto = {
    FirstName: "test",
    LastName: "test2"
};

var metadata = {
    FirstName: {
        Label: "First name",
        Template: "tmpl-input",
        extend: {
            required: true
        }
    }
}


var model = function() {
    var self = {};
    self.fields = [];
    for (var a in proto) {
        var meta = metadata[a] || {};
        self.fields.push(
        ko.observable({
            Name: a,
            Label: meta.Label || a,
            Template: meta.Template,
            Value: ko.observable(proto[a])
        }).extend(meta.extend));
    }

    return self;
}();

ko.applyBindings(model);