JSFiddle - React, Tailwind, and code Playground

by greenlaw110

HTML

<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-1.1.2.js"></script>
<script src="http://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<textarea data-bind="value: rawStr"></textarea>

<div data-bind="template: {name: 'prsn-tmpl', foreach: prsns}"></div>
<div data-bind="template: {name: 'prsn-tmpl-2', foreach: prsns}"></div>

<button data-bind="click: addPrsn">add person</button>

<script type="text/html" id='prsn-tmpl'>
<div class='prsn-panel'>
<div>
    <label>name</label><input data-bind="value: name"></input>
</div>
<div>
    <label>age</label><input data-bind="value: age"></input>
</div>
</div>
</script>

<script type="text/html" id='prsn-tmpl-2'>
<dl>
    <dt>name</dt>
    <dd data-bind="text: name()"></dd>
    <dt>age</dt>
    <dd data-bind="text: age()"></dd>
</dl>
</script>

CSS

label {
    display: block;
    position: relative;
    float: left;
    clear: left;
    width: 8em;
    text-align: right;
    background: #efefef;
    margin-right: 8px;
}
input {
    position: relative;
    float: left;
}
textarea {
    width: 300px;
    height: 180px;
}
dl {
    display: block;
    position: relative;
    float: left;
    clear:both;
    margin-top: 1em;
}
dl > dt,
dl > dd {
    position: relative;
    float: left;
}
dl > dt {
    width: 8em;
    background: #666;
    text-align: right;
    margin-right: 10px;
    padding-right: 5px;
    color: #fff;
    clear: left;
}

JavaScript

var mymodel = {};

//var sjson = '[]';
var sjson = '[{"name": "john", "age": "100"}]';

mymodel.prsns = ko.mapping.fromJSON(sjson);
mymodel.addPrsn = function() {
    mymodel.prsns.push({name: ko.observable(''), age: ko.observable(0)});
}

mymodel.rawStr = ko.dependentObservable({
    read: function() {return ko.toJSON(mymodel.prsns)},
    write: function(val) {
        ko.mapping.updateFromJSON(mymodel.prsns, val);
    }
});

ko.applyBindings(mymodel);