knockout.js - Tracking changes - observable element in observableArray -

i need edit array of integers in web application, using javascript , knockout.js. array bound text boxes, , whenever value of text box changed, array updated. , when gets updated, sum of elements calculated.

this first try: http://jsfiddle.net/zls2a/0/. not working (the sum value not update when typing new value element). that's when realized observablearray trigger sum function after inserting or removing items.

<h4>numbers</h4> <button data-bind="click: add">add</button> <ul data-bind="foreach: numbers">     <li>         <input data-bind="value: $data"></input>     </li> </ul> <span data-bind="text: sum"></span>  function myviewmodel() {     var self = this;      self.numbers = ko.observablearray([         1,         2,         3     ]);      self.sum = ko.computed(function() {         var items = self.numbers();         var total = 0;         (var = 0; < items.length; i++) {             total += parseint(items[i]);         }         return total;     });      self.add = function() {         var lastindex = self.numbers().length - 1;         var lastvalue = self.numbers()[lastindex];         self.numbers.push(lastvalue + 1);     } }  ko.applybindings(new myviewmodel()); 

my next attempt make every element in numbers array observable (http://jsfiddle.net/zls2a/1/). did not work again.

self.numbers = ko.observablearray([     ko.observable(1),     ko.observable(2),     ko.observable(3) ]); 

my last try creating new class (arrayitem) hold value of element inside observable property. time worked! (http://jsfiddle.net/zls2a/3/)

<h4>numbers</h4> <button data-bind="click: add">add</button> <ul data-bind="foreach: numbers">     <li>         <input data-bind="value: value"></input>     </li> </ul> <span data-bind="text: sum"></span>  function myviewmodel() {     var self = this;      self.numbers = ko.observablearray([         new arrayitem(1),         new arrayitem(2),         new arrayitem(3)     ]);      self.sum = ko.computed(function() {         var items = self.numbers();         var total = 0;         (var = 0; < items.length; i++) {             total += parseint(items[i].value());         }         return total;     });      self.add = function() {         var lastindex = self.numbers().length - 1;         var lastitem = self.numbers()[lastindex];         var newvalue = parseint(lastitem.value()) + 1;         self.numbers.push(new arrayitem(newvalue));     } }  function arrayitem(value){     var self = this;     self.value = ko.observable(value); }  ko.applybindings(new myviewmodel()); 

however, didn't have create new class arrayitem. is there way rid of it, making example work having observablearray of observable elements (like second attempt)?

knockout not track value, workaround can use event keypress or change , update values yourself. see fiddle: http://jsfiddle.net/tkirda/zls2a/4/

function myviewmodel() {     var self = this;      self.numbers = ko.observablearray([         1,         2,         3     ]);      self.onchange = function(val, e){         var el = e.srcelement;         var newval = parseint(el.value);         var index = parseint(el.getattribute('data-index'));         self.numbers()[index] = newval;         self.updatesum();     }      self.sum = ko.observable(0);      self.updatesum = function() {         var items = self.numbers();         var total = 0;         (var = 0; < items.length; i++) {             total += parseint(items[i]);         }         self.sum(total);     };      self.updatesum();      self.add = function() {         var lastindex = self.numbers().length - 1;         var lastvalue = self.numbers()[lastindex];         self.numbers.push(lastvalue + 1);     } }  ko.applybindings(new myviewmodel());