JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></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: item.dynTemplate, data: item.Value}"></td>
            <td data-bind="template: {name: cost.dynTemplate, data: cost.Value }"></td>
            <td data-bind="template: {name: amount.dynTemplate, data: amount.Value}"></td>
            <td></td>
        </tr>
    </tbody>
</table>
<script id="inpTmp" type="text/html">
    <input data-bind="value: $data" class="input-element" />
</script>
<script id="dispTmp" type="text/html">
    <p data-bind="text: $data"></p>
</script>

JavaScript

function ItemAdd(name, icost, iamount) {
    var self = this;
    self.item = new DataItem(name);
    self.cost = new DataItem(icost);
    self.amount = new DataItem(iamount);
}

function DataItem(value) {
    var self = this;
    self.Value = ko.observable(value);
    self.dynTemplate = function(){
        return self.Value() === 0 || self.Value() === "" ? 'inpTmp' : 'dispTmp';
    };
};

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));
    };
}

var model = new TestModel();
ko.applyBindings(model);