asp.net - ObservableArray not notifying when item changed -

i try bind observablearray div on page , ok. array contains simple json objects, not observable, obtained webservice.

after that, want able modify objects in array , view refreshed each modification. example, when checkbox gets clicked change flag on json object (this seems work automatically right) , @ same time ui should updated, not happen. provide me reason (is because objects simple, not observable?) , solution?

    var documentcontentmodel = function () {         var self = this;         self.content = ko.observablearray();         self.elementapprovalchanged = function (element) {             documentservice.dosomething(                 element.id,                 function (result) {                     if (!result) {                         var negatedapproved = !element.approved;                         element.approved = negatedapproved;                     }                 },                 function (error) {                     alert(error);                 });             return true;         };     };      $(document).ready(function () {         var contentmodel = new contentmodel();         documentservice.getcontent(1,         function (result) {             contentmodel.content(json.parse(result));         });          ko.applybindings(contentmodel);     }); 

ui

<div class="contentcontainer">     <div data-bind='foreach: content'>         <div class="contentelement" data-bind='css: { notapproved: !approved} '>            <div class="contentvalue" data-bind='html: value'></div>             <div class="approval">                 <input type="checkbox" data-bind='checked: approved, click: $root.elementapprovalchanged' />             </div>          </div>      </div> </div> 

what happening on checkbox click send request webservice , if call returns false want reset element's approved flag. , whithout that, selecting checkbox should change div class attribute mark notapproved when needed. none of happens.

an observablearray tracks array. if added, removed or replaced in array trigger update view.

an observablearray not track state of individual properties on items in array. if have approved flag on objects needs observable ui reflect changes property.

so have like:

element.approved = ko.observable(false); .... ....  if (!result) {                            var negatedapproved = !element.approved();                            element.approved(negatedapproved);                      }  

(or if want more consise:

element.approved(!element.approved());  

)