javascript - Knockout JS foreach data-binding with computed fields -
i trying bind grid 3 fields in each row using knockout.js: net price (textbox), tax amount (label), total price (textbox).
all fields autocaltulated either net or total price changes. calc simple: net price = total price - tax amount; total price = net price + tax amount; tax amount = taxrate (const) * net price
these bindings single entity demonstrated in fiddle: http://jsfiddle.net/ruslans/yedrt/
but how whole list in anobservable array have no idea?
taxrate constant each row can different (it comes source data).
plus. numeric fields must formatted 2 decimal places, hence function. i've got far:
<table> <thead> <tr> <th> </th> <th>net price</th> <th>tax band</th> <th>tax amount</th> <th>total price</th> </tr> </thead> <tbody data-bind="foreach: optionsmodel.availabledealerfitoptions"> <tr> <td> <label class="checkbox"> <input type="checkbox" class="optioncheck" /> <span data-bind="text: description"></span> </label> <input type="hidden" class="optiontaxrate" data-bind="value: taxrate" /> </td> <td> <input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.formatnumber(netprice)" /> </td> <td> <span data-bind="text: taxbanddisplayname"></span> </td> <td> <span class="uneditable-input" data-bind="text: $root.formatnumber(taxamount)"></span> </td> <td> <input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.gettotaldealerfitoptionprice($data)" /> </td> </tr> </tbody> </table> http://jsfiddle.net/ruslans/k7tk3/2/
have done before? if so, give me pointers on how achieved, please?
your issue using observable array of objects - recomputed when size of array changes, not contents of array!
what want array of ko.observable. ko.computed function revaluated when individual values change. if have dynamic list of items sum, use observable array of observables.
hope helps!
Comments
Post a Comment