JSFiddle - React, Tailwind, and code Playground

by glassy10

HTML

<div style="float:right">
    <pre data-bind="text: ko.toJSON($root,null,2)"></pre>
</div>

<div class="row" data-bind="with:boughtIn">
   <div><input type="text" data-bind="value:item" PlaceHolder ="Item" /></div>
   <div><input type="text" data-bind="value:qty" PlaceHolder ="Qty"/></div>
   <div><input type="text" data-bind="value:price" PlaceHolder ="Price"/></div>
    <div><button data-bind="click:$root.addBoughtIn" >Add Item</button></div>
</div>

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Q x P</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach:boughtIns">
        <tr>
            <td data-bind="text:item"></td>
            <td data-bind="text:qty"></td>
            <td data-bind="text:price"></td>
            <td>
                <span data-bind="text:qxp"></span>
            </td>
            <td><a href="#" data-bind="click:$root.deleteBoughtIn">Delete</a></td>
        </tr>
    </tbody>
</table>

CSS

input {margin-bottom:6px;}

JavaScript

var ViewModel = function() {
    var self = this;
    //other observables
    //...
     //boughtIns
    self.boughtIns = ko.observableArray([]);
    self.boughtIn = ko.observable(new BoughtIn());
    
    self.addBoughtIn = function(data) {
        self.boughtIns.push(data);
        //reset to clear fields
        self.boughtIn(new BoughtIn());
    };
    self.deleteBoughtIn = function(data) {
        self.boughtIns.remove(data);
    };
}

function BoughtIn() {
    var self = this;
    self.item = ko.observable(),
    self.qty = ko.observable(),
    self.price = ko.observable(),
    self.category = ko.observable(),
    //NOT WORKING ----
    self.qxp = ko.pureComputed( {
        read: function () { return self.qty() * self.price(); },
        deferEvaluation: true
    })
    //----------------
}

ko.applyBindings(new ViewModel());