Question

In my ViewModel I have:

self.collaps = ko.observableArray([0,0,0,0,0,0,0]);

self.shouldShow = function(index) { return self.collaps()[index]; };

My test div:

<div data-bind="visible: shouldShow(5)">Shown!</div>

I data-bind a button with click: show :

self.show = function() {
    // 1. Index 5 gets true after 2 clicks!!? But UI never updates!
    self.collaps()[5] = true;

    // 2. This is push-ing in true starting at index 0
    self.collaps.replace(self.collaps()[5], true);

    // 3. If I combine the two, I get the behavior I want, I think :)
    self.collaps()[5] = true;
    self.collaps.replace(self.collaps()[5], true);

};

What is happening here? What is the right way of doing this?

—-> JSFIDDLE for your pleasure! <—-

Answer 1

Here is a quote from the ko documentation:

Key point: An observableArray tracks which objects are in the array,
not the state of those objects

Simply putting an object into an observableArray doesn’t make all of
that object’s properties themselves observable. Of course, you can
make those properties observable if you wish, but that’s an
independent choice. An observableArray just tracks which objects it
holds, and notifies listeners when objects are added or removed.

So when you are changing array item’s value knockout is not notified. You can use valueHasMutated function to notify subscribers manually:

self.show1 = function() {
    self.test(self.test()+1);

    self.collaps()[5] = true;
    self.collaps.valueHasMutated();
};