I don't know why I have to call valueHasMutated on this knockout observable array

Question

I'm using Durandal framework. I have a logger module that displays and stores messages displayed to the user. The messages are stored in an observable array using obsArray.push(...).

var logMessages = ko.observableArray();
logMessages.push({
            dt: dt,
            tp: type,
            msg: message
        });

No problem there. Also in this module I export the obsArray variable.

var logger= {
        logMessages: logMessages,
    };

return logger;

In another module called "messages" I have a view/viewmodel that gets the obsArray from the logger and displays the messages. I have another observable array in the messages vm called _mess, and it's populated by doing

_mess(logger.logMessages())

The observable array _mess is bound to my view. Everything works fine when I go to the view. I see the contents of the observable array "logMessages" in the logger.

However, while I'm looking at the view I can push a button that calls the logger and results in a push on the array. The data is added to the array, but my view is not updated automatically. I have to call valueHasMutated on the observable array in the messages vm like so:

var addMessage = function () {
        logger.show('this is test');
        _mess.valueHasMutated();   // required to see the update appear in the view
    };

If I don't call valueHasMutated, my view does not update.

This seems like a very simple use case, I'm probably just missing a step or configuration.

Thanks

Answer 1

The problem is that you've set up two observables to reference the same array. These separate observables have separate subscriptions, and updates on the one observable array don't propagate to the other even though the underlying array has changed.

Instead of

_mess = ko.observableArray();
_mess(logger.logMessages());

Write

_mess = logger.logMessages;