JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script id="inpTmp" type="text/html">
    <input data-bind="value: $parent[$data]" />
</script>
<script id="dispTmp" type="text/html">
    <p data-bind="text: $parent[$data]"></p>
</script>

<table>
    <thead>
    <tr>
        <th>Item</th>
        <th>Cost</th>
        <th>Amount</th>
        <th>
            <button class="btn btn-default" data-bind="click: addItem">Add Item</button>
        </th>
    </tr>
</thead>
<tbody data-bind="foreach: items">
    <tr>
        <td data-bind="template: {name: $parent.dynTemplate, data: 'item' }">
        </td>
        <td data-bind="template: {name: $parent.dynTemplate, data: 'cost' }">    
        </td>
        <td data-bind="template: {name: $parent.dynTemplate, data: 'amount' }">
        </td>
    </tr>
</tbody>
</table>

JavaScript

function ItemAdd(name, icost, iamount) {
    var self = this;
    self.item = ko.observable(name);
    self.cost = ko.observable(icost);
    self.amount = ko.observable(iamount);
}
function TestModel() {
    var self= this;
    self.items= ko.observableArray([
        new ItemAdd("a", 5, 10),
        new ItemAdd("b", 6, 4)
    ]);
    self.addItem= function() {
        self.items.push(new ItemAdd("", 0, 0));
    };
    self.dynTemplate= function(field, context) {
        var value = context.$parent[field]();
        if(value=== 0 || value=== '') {
            return 'inpTmp';
        }
        return 'dispTmp';
    };
}
ko.applyBindings(new TestModel());