Conversion example

by Silvestrs Kante

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<h3>Vendor Code: <span data-bind="text: details.VendorCode()"></span>

</h3>

<table>
    <tbody>
        <tr>
            <td colspan="5"><h4>PO Line item</h4></td>
        </tr>
        <tr>
            <td>Part Number: <span data-bind="text: poli.partnumber()"></span>

            </td>
            <td>Quantity: <span data-bind="text: poli.quantity()"></span>

            </td>
            <td>Unit Price: <span data-bind="text: poli.unitprice()"></span>

            </td>
            <td colspan="2">UOM: <span data-bind="text: poli.uom()"></span>

            </td>
        </tr>
        <tr class="split"><td>.</td></tr>
        <tr></tr>
        <tr>
            <td colspan="5"><h4>Invoice Line item</h4></td>
        </tr>
        <tr>
            <td colspan="5">Captured Data</td>
        </tr>
        <tr>
            <td>Part Number: <span data-bind="text: invli.partnumber"></span>

            </td>
            <td>Quantity: <span data-bind="text: invli.meta_Q"></span>

            </td>
            <td>Unit Price: <span data-bind="text: invli.meta_UP"></span>

            </td>
            <td colspan="2">UOM:
                <span data-bind="text: invli.meta_UOM"></span>
            </td>
        </tr>
        <tr>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td colspan="5">ACI Export Data</td>
        </tr>
        <tr>
            <td>Part Number: <span data-bind="text: invli.partnumber"></span>

            </td>
            <td>Quantity: <span data-bind="text: invli.quantity"></span>

            </td>
            <td>Unit Price: <span data-bind="text: invli.unitprice()"></span>

            </td>
            <td>UOM:
                <span data-bind="text: invli.meta_UOM"></span>
            </td>
            <td>Conversion Factor:
                <input type="text" data-bind="value: invli.factor, valueUpdate: 'afterkeydown'" />
      ...

CSS

html, body {
    font-family: Tahoma;
}

h4 {
    margin: 0;
    padding: 0;
}

.split {
    padding: 5px;
}

.bolded{
    font-weight: bold;
}

JavaScript

var vm = function () {

    var details = {
        VendorCode: ko.observable("USA00273"),
        UOMList: ko.observableArray([{
            Key: "TON",
            Factor: 2000
        }, {
            Key: "LB",
            Factor: 1
        }])
    }

    var POLI = {
        partnumber: ko.observable("SNOBRITE LV"),
        quantity: ko.observable(42500.000),
        uom: ko.observable("LB"),
        unitprice: ko.observable(0.066)
    }

    var invli = function () {
        var self = this;
        self.meta_UP = 132.00;
        self.meta_Q = 21.250;
        self.meta_UOM = "TON";
        self.partnumber = "SNOBRITE LV";


        self.factor = ko.observable(2000)

        self.quantity = ko.computed(function () {
            return self.meta_Q * self.factor();
        });

        self.unitprice = ko.computed(function () {
            return self.meta_UP / self.factor();
        });



    }

    return {
        details: details,
        poli: POLI,
        invli: new invli()
    }
}

ko.applyBindings(new vm())