javascript - submitting textbox values with knockout.js -

i'm trying submit value textbox array displayed in table format. further calculations made right i'm having trouble bindings. in console in chrome error i'm getting is

uncaught typeerror: property 'item' of object#<itementry> not function 

i can't figure out i'm supposed define newitem (the value submitted textbox).

here's html

<td><input type="text" data-bind="value: newitem" /></td> <button data-bind="click: additem">add item</button>  <table>     <thead><tr>         <th>item number</th><th>price</th><th></th>     </tr></thead>     <tbody data-bind="foreach: itemnumbers">         <tr>             <td data-bind="text: item"></td>             <td data-bind="text: price"></td>             <td><a href="#" data-bind="click: $root.removeitem">remove</a></td>         </tr>         </tbody> </table>  <h3 data-bind="visible: totalcost() > 0">     total cost: $<span data-bind="text: totalcost().tofixed(2)"></span> </h3> 

and here's javascript

function itementry(item, price) {     var self = this;     self.item = item;     self.price = price;  }  // overall viewmodel screen, along initial state function entryviewmodel(newitem) {     var self = this;     self.newitem = newitem;       // editable data     self.itemnumbers = ko.observablearray([         new itementry("new item", "$22.50")     ]);      // computed data     self.totalcost = ko.computed(function() {        var total = 0;        (var = 0; < self.itemnumbers().length; i++)            total += self.itemnumbers()[i].item.price;        return total;     });          // operations     self.additem = function() {         self.itemnumbers.push(new itementry(self.newitem, "$20.00"));     }     self.removeitem = function(item) { self.itemnumbers.remove(item) } }  ko.applybindings(new entryviewmodel()); 

i see few updates potentially want make:

• itementry accepts price argument, while dealing price in constructor
• your item/price not observables in itementry, formattedprice not need computed, can normal function (unless choose make them observable, if made full editor
• the formattedprice function trying read item.price(). price separate argument , item name of item.
• in formattedprice may want consider parsing value number
• when call additem first argument data @ context (which root view model). so, can either read newitem off of it, or use self.newitem() current structure.
• at end of additem, want clear newitem, input box ready next entry.
• your totalcost computed reading item().price , needs item.price.

here updated fiddle many of these changes: http://jsfiddle.net/rniemeyer/8cdun/

if want make editor these items, want make itementry members observable.