javascript - Computed function issue with KnockOut -

working knockout - i'm trying build basics of master detail/items app before adding mvc .net code.

all want have simple item, price, tax - , computed column show amount including tax each item:

the client side knockout viewmodel is:

var giftmodel = function(gifts) { var self = this; self.gifts = ko.observablearray(gifts);   self.formattedprice = ko.computed(function() {     var pricet = self.gifts().price;     return pricet ? "$" + pricet.tofixed(2) * (1 + self.gifts().tax : "none";   });      self.addgift = function() {     self.gifts.push({         name: "",         price: "",         tax:0     }); };  self.removegift = function(gift) {     self.gifts.remove(gift); };  self.save = function(form) {     alert("could transmit server: " + ko.utils.stringifyjson(self.gifts));     // transmit server regular form post, write this: ko.utils.postjson($("form")[0], self.gifts); }; };  var viewmodel = new giftmodel([ { name: "tall hat", price: "39.95", tax:17.5}, { name: "long cloak", price: "120.00", tax:20} ]); ko.applybindings(viewmodel);  // activate jquery validation $("form").validate({ submithandler: viewmodel.save }); 

the table markup is:

<table data-bind='visible: gifts().length > 0'>         <thead>             <tr>                 <th>gift name</th>                 <th>price</th>                 <th>tax</th>                 <th />             </tr>         </thead>         <tbody data-bind='foreach: gifts'>             <tr>                 <td><input class='required' data-bind='value: name, uniquename: true' /></td>                 <td><input class='required number' data-bind='value: price, uniquename: true' /></td>                  <td><input class='required number' data-bind='value: tax, uniquename: true' /></td>                <td data-bind='text: formattedprice'></td>                 <td><a href='#' data-bind='click: $root.removegift'>delete</a></td>              </tr>         </tbody>     </table>      <button data-bind='click: addgift'>add gift</button>     <button data-bind='enable: gifts().length > 0' type='submit'>submit</button> 

it's stalling formattedprice function doesnt appear working.

i've got in jsfiddle here: http://jsfiddle.net/marktait/tr6sy/ - able me on seemingly simple hurdle?

thank you,

mark

the problem calling comouted function while looping on list of gifts. however, computed method not available given gift, gifts. have 2 choices:

either make each gift object object computed method (like user brandon suggested), or transform normal function takes parameter gift, this:

self.getformattedprice = function(price, tax) {     var val = price ? "$" + parsefloat(price).tofixed(2) * (1 + tax) : "none";     return val; };     

and then, call this:

<td data-bind='text: $parent.getformattedprice(price, tax)'></td> 

i've updated fiddle.