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>
<div data-bind="template: {name: 'prsn-tmpl', foreach: prsns}"></div>

<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>

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 = {};

mymodel.prsns = ko.observableArray([]);
mymodel.prsns.push({name: ko.observable('john'), age: ko.observable(100)});
mymodel.prsns.push({name: ko.observable('smith'), age: ko.observable(10)});


ko.applyBindings(mymodel);