Why one property is not getting observable knockout.js -

here full code.

when run program working when change quantity value subtotal not getting changed.

if possible, please go through code , tell me area need fix in code?

full code

    <table id="table1" cellspacing="0" cellpadding="0" border="0">     <tr>         <th style="width:150px">product</th>         <th>price ($)</th>         <th>quantity</th>         <th>amount ($)</th>     </tr>      <tbody data-bind='template: {name: "ordertemplate", foreach: lines}'></tbody> </table>  <script type="text/html" id="ordertemplate">     <tr>         <td><select data-bind='options: products,                                optionstext: "name",                                value: "id",                                optionscaption:"--select--",                                value: product'>                                </select>         </td>         <td data-bind='with: product'>             <span data-bind='text: formatcurrency(price)' ></span>         </td>         <td data-bind='with: product'>             <input data-bind='value: quantity' />         </td>         <td ><span data-bind='text: formatcurrency(subtotal())'></span></td>     </tr>  </script>      <script type="text/javascript">     var _products = [       {           "name": "1948 porsche 356-a roadster",           "price": 53.9,           "quantity": 1       },       {           "name": "1948 porsche type 356 roadster",           "price": 62.16,           "quantity": 2       },       {           "name": "1949 jaguar xk 120",           "price": 47.25,           "quantity": 1       },       {           "name": "1952 alpine renault 1300",           "price": 98.58,           "quantity": 1       },       {           "name": "1952 citroen-15cv",           "price": 72.82,           "quantity": 1       },       {           "name": "1956 porsche 356a coupe",           "price": 98.3,           "quantity": 1       },       {           "name": "1957 corvette convertible",           "price": 69.93,           "quantity": 1       }];        function formatcurrency(value) {           return "$" + value.tofixed(2);       }        var cartline = function () {           var self = this;           self.products = ko.observablearray(_products);           self.product = ko.observable(1);           self.price = ko.observable(1);           self.quantity = ko.observable(1);   //default quantity value defined in _products array           self.subtotal = ko.computed(function () {               //return self.product() ? self.product().price * parseint("0" + self.product().quantity, 10) : 0;               return self.price() * self.quantity();           });        };        var cart = function () {           // stores array of lines, , these, can work out grandtotal           var self = this;           self.lines = ko.observablearray([new cartline()]); // put 1 line in default       };        ko.applybindings(new cart()); </script> 

quick summary, quantity textbox populated selected product's quantity because of with binding. price observable had static value of 1, got selected price select element. also, think quantity property not needed in _products array.

i have amended following comments,

html

<table id="table1" cellspacing="0" cellpadding="0" border="0">     <tr>         <th style="width:150px">product</th>         <th>price ($)</th>         <th>quantity</th>         <th>amount ($)</th>     </tr>      <tbody data-bind='template: {name: "ordertemplate", foreach: lines}'></tbody> </table> <script type="text/html" id="ordertemplate">     <tr>         <td>             <select data-bind='options: products, optionstext: "name", value: "id", optionscaption:"--select--", value: product'></select>         </td>         <td data-bind='with: product'>             <span data-bind='text: formatcurrency(price)'></span>         </td>         // removed data-bind here because getting quantity assigned product         // not input text box         <td>             <input data-bind='value: quantity, valueupdate: "afterkeydown"' />         </td>         <td><span data-bind='text: subtotal()'></span></td>     </tr> </script> 

javascript

    var _products = [     {         "name": "1948 porsche 356-a roadster",         "price": 53.9,         "quantity": 1     },     {         "name": "1948 porsche type 356 roadster",         "price": 62.16,         "quantity": 2     },     {         "name": "1949 jaguar xk 120",         "price": 47.25,         "quantity": 1     },     {         "name": "1952 alpine renault 1300",         "price": 98.58,         "quantity": 1     },     {         "name": "1952 citroen-15cv",         "price": 72.82,         "quantity": 1     },     {         "name": "1956 porsche 356a coupe",         "price": 98.3,         "quantity": 1     },     {         "name": "1957 corvette convertible",         "price": 69.93,         "quantity": 1     }];  function formatcurrency(value) {     return "$" + value.tofixed(2); }  var cartline = function () {     var self = this;     self.products = ko.observablearray(_products);     self.product = ko.observable(null); // set null holds selected product select element      //self.price = ko.observable(1); not     self.quantity = ko.observable(1);      self.subtotal = ko.computed(function () {         if (!self.product()) // on load self.product() null, return avoid error             return;         // select products price , multiple quantity textbox         return formatcurrency(self.product().price * self.quantity());     });  };  var cart = function () {     // stores array of lines, , these, can work out grandtotal     var self = this;     self.lines = ko.observablearray([new cartline()]); // put 1 line in default };  ko.applybindings(new cart()); 

this works.

thanks