knockout.js - Using Arrays inside knockout observable -

i have observable arrays bound html fields on ui.

however, changes fields on ui not reflected in viewmodel because per knockout documentation, observablearray tracks objects in array, not state of objects.

the code looks below:

var rewardmissionmodel = function () {     var self = this;     self.achievementid = ko.observable();     self.rewardasset = ko.observable();     self.rewards = ko.observablearray([new reward("points", "qty", "", "item", "")]);      self.isdirty = false;      //add reward     self.addreward = function () {         //var self = this;         var temprewardtype = "points";         self.rewards.push(new reward(temprewardtype, "qty", "", "item", "", 0));     };      //remove reward     self.removereward = function (reward) {         if (self.rewards().length > 1)             self.rewards.remove(reward);     };     //------------------------------------------------------------------------------ };  function reward(rewardtype, quantitylabel, rewardquantity, itemlabel, item, itemid) {     var self = this;     //self.viewmodel = viewmodel;     self.rewardtypes = ["points", "coins", "items"];         self.rewardtype = ko.observable(rewardtype);     self.itemlabel = ko.observable(itemlabel);     self.itemtext = ko.observable(item);     self.quantitylabel = ko.observable(quantitylabel);     self.rewardquantity = ko.observable(rewardquantity);     this.selectedrewardtype = ko.observable(rewardtype);     self.isitemtype = function (selectedrewardtype) {         return selectedrewardtype === this.selectedrewardtype();     }      self.itemid = ko.observable(itemid);  } 

html code:

<div data-bind="template: { name: 'rewards-template', foreach: rewards }"></div>                 <script type="text/html" id="rewards-template">                     <span style="margin-left:30px">reward type</span>                     <select class="dropdown" data-bind="options: rewardtypes, value: selectedrewardtype"></select>                     <span data-bind="text: itemlabel, visible: isitemtype('items')"></span> 

the viewmodel dirty flag gets set when add or remove objects observable array, when modify on ui not considered.

one of approach put normal array within observable.

is there code example illustate or better approach?

please help.

i think best way make properties of observable array object act observable make them observable creating observable array contains observable. example::

    var viewmodel = {     accounts: ko.observablearray([]),     init: function () {         this.accounts.push({             property1: ko.observable("some value"),             property2: ko.observable("some value"),             property3: ko.observable("some value")             });         }     }; 

kindly check question, think it's looking for

updating of object inside observable array done changes not coming on browser