Knockout update observableArray item does not reflect in UI?

Question

The problem when my viewModel has observableArray (self.images) and I want when one item property (mm) is changed to be reflected on UI

in the real code the images is loaded from server and mapped to object DOcImage

here is the code note that i have been trying few things based on other questions answers but no luck yet

here is fiddle http://jsfiddle.net/mosta/jt6bbeq4/21/ when click "change" it should display first item = 2, according to line in upate function

    var DocImage = function () {
              var self = this;              
              self.mm = ko.observable('1');
    self.nn = ko.observable('1');
          };
    var viewModel = function () {
              var self = this;
            self.images = ko.observableArray([DocImage]);
              self.update = function () {
                  self.images()[0].mm = '2';
              }
          };

          var vm = new viewModel(); 
    vm.images =  [{ mm: ko.observable('1') ,nn: ko.observable('2') }, {mm:ko.observable('3'), nn:ko.observable('4')}];
ko.applyBindings(vm);

Appreciate your help , thanks

Answer 1

When you set

m.images =  [{ mm: ko.observable('1')  ...

you actually re-write your observableArray with simple array. To update the value inside observable array you need to use another syntax (See documentation )

m.images([{ mm: ko.observable('1')  ...);

The same is true for simple observables like mm

self.images()[0].mm('2');

See fiddle

Answer 2

Here you go:

var viewModel = function () {
              var self = this;
            self.images = ko.observableArray([DocImage]);
              self.update = function () {
                  self.images[0].mm('2');
              }
          };

          var vm = new viewModel(); 
vm.images =  [{ mm: ko.observable('1') ,nn: ko.observable('2') }, {mm:ko.observable('3'), nn:ko.observable('4')}];
ko.applyBindings(vm);