KnockoutJS and PubSub to update observable array between views

Question

I have two modalviews - MyModalViewA (parent) and MyModalViewB (child).

MyModalViewA spawns MyModalViewB, as custom binding, as well has observable array which I need to update. And it looks like:

(function () {

            'use strict';

            var
                window = __webpack_require__(/*! window */ 10),
                _ = __webpack_require__(/*! _ */ 2),
                $ = __webpack_require__(/*! $ */ 12),
                ko = __webpack_require__(/*! ko */ 3),
                key = __webpack_require__(/*! key */ 16),

                Enums = __webpack_require__(/*! Common/Enums */ 4),
                Utils = __webpack_require__(/*! Common/Utils */ 1),

                Links = __webpack_require__(/*! Common/Links */ 13),
                Remote = __webpack_require__(/*! Remote/User/Ajax */ 14),

                kn = __webpack_require__(/*! Knoin/Knoin */ 5),
                AbstractView = __webpack_require__(/*! Knoin/AbstractView */ 11),
                AttachmentModel = __webpack_require__(/*! Model/Attachment */ 86)
            ;

    function MyModalViewA()
    {
       ...some observables...
       //data response which must be updated
       this.rows= ko.observableArray([]);

       this.getResults = Utils.createCommand(this, function() 
       {
         kn.showScreenPopup(__webpack_require__(/*! View/Popup/SearchUsers */ 171),[oData]);
       }
    }

 kn.constructorEnd(this);
}

module.exports = MyModelViewA;

}());

Then MyModelViewB:

(function () {

            'use strict';

            var
                window = __webpack_require__(/*! window */ 10),
                _ = __webpack_require__(/*! _ */ 2),
                $ = __webpack_require__(/*! $ */ 12),
                ko = __webpack_require__(/*! ko */ 3),
                key = __webpack_require__(/*! key */ 16),

                Enums = __webpack_require__(/*! Common/Enums */ 4),
                Utils = __webpack_require__(/*! Common/Utils */ 1),

                Links = __webpack_require__(/*! Common/Links */ 13),
                Remote = __webpack_require__(/*! Remote/User/Ajax */ 14),

                kn = __webpack_require__(/*! Knoin/Knoin */ 5),
                AbstractView = __webpack_require__(/*! Knoin/AbstractView */ 11),
                AttachmentModel = __webpack_require__(/*! Model/Attachment */ 86)
  ;

        function MyModalViewB()
        {
           ...some observables...

        this.doSearch = Utils.createCommand(this, function() 
        {
           MyModelViewB.findUsers(userId);
        }

        kn.constructorEnd(this);
        }

        MyModelViewB.findUsers = function (userId)
        {
             //here I'm retriewing rows 
             //and I need I need to update rows from MyModalViewA
        }


    module.exports = MyModelViewB;

    }());

Then based on an answer from Whats the best way of linking/synchronising view models in Knockout? I have tried to use PubSub to update this.rows= ko.observableArray([]); from MyModelViewA.

For that I have added var postbox = ko.observable(); to MyModelViewA constructor variables. Then in MyModelViewA I have added

   postbox.subscribe(function(newValue) {
        this.rows.push(newValue);
    }, this);

and after that in MyModelViewB I have added

this.results = ko.observableArray([]);
this.results.subscribe(function(newValue) {
    postbox.notifySubscribers(newValue);
});

But both views doesn't get what newValue is neither MyModelViewB is not updating MyModelViewA this.rows observable when I will hardcode newValue in MyModelViewB.

At that point I'm not sure if I have got correctly answer from mentioned link above to have get it to work.

Edits

I have added to top of my modules bundle code

var postbox = new ko.subscribable();

as below code

(function($) { $(function() {
    window.postbox = new ko.subscribable();
    });
});

was throwing error when trying to declare subscribable

Cannot read property 'subscribe' of undefined

then in the module for MyModalViewA added simplified version from PFX answer:

    postbox.subscribe(function(newValue) {
            self.myTest(newValue);

            console.log('New value: ' + newValue);
        }, null, "NewRowAvailable"
    );

and in the module for MyModalViewB under MyModelViewB.findUsers added

var newRow = "testing123";
postbox.notifySubscribers(newRow, "NewRowAvailable");

When I will debug that code it shows that postbox was defined as Object {NewValueAvailable: } but notifySubscribers wasn't updating subscribable.

Thoughts?

If the parent model is responsible for spawning the child model, I'd pass a reference to the `rows` array in the constructor. — user3297291, Aug 20 '18 at 15:35
@user3297291 when I try to access `this.rows` in the child model it says is `undefinied` — JackTheKnife, Aug 20 '18 at 18:31

pfx · Accepted Answer · 2018-08-22T14:09:51.957

1

Make sure that the postboxinstance is one and the same instance being shared between both viewmodels and that the notifySubscribersand subcribe methods follow the signatures below.

notifySubscribers(eventData, eventName); 

subscribe(function(eventData) { ... }, null, eventName);

Below you find a simplified version of what you are trying to achieve.
Here only 1 search result is being passed, but it might also be more via eg. an array.

var postbox = ko.observable();

function MyModalViewA()
{
    var _self = this;
    _self.rows = ko.observableArray([
        { label: "foo" },
        { label: "bar" }    
        ]);
    
    postbox.subscribe(function(newValue) {         
          _self.rows.push(newValue);
      }, null, "PFX.NewRowAvailable"
      );
};

function MyModalViewB()
{
    var _self = this;
    
    _self.search = function() {
    
        var newRow = { "label" : "baz" };
        postbox.notifySubscribers(newRow, "PFX.NewRowAvailable");      
    };
};

var vma = new MyModalViewA();
ko.applyBindings(vma, $("#vma").get(0));

var vmb = new MyModalViewB();
ko.applyBindings(vmb, $("#vmb").get(0));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div id="vma">
    <h3>ViewModel A</h3>
    <ol data-bind="foreach: rows">
        <li data-bind="text: label"></li>
    </ol>
</div>

<hr />

<div id="vmb">    
    <h3>ViewModel B</h3>
    <button data-bind="click: search">search</button>
</div>

edited Aug 22 '18 at 14:09

answered Aug 22 '18 at 09:27

pfx

20,323
43
37
57

It seems so simple but I have problems to get `postbox.notifySubscribers` to work when trying to implement that in my code where each ModalView is a separate module in a webpack. Each module (and ModalView) sees `postbox` as an observable but is not getting updated. Also KnockoutJS documentation is so weak on `notifySubscribers()`. Thoughts? – JackTheKnife Aug 28 '18 at 16:05
I have my postbox as a global singleton on a custom namespace: (function($) { $(function() { window.PFX.postbox = new ko.subscribable(); }); })(jQuery, window.PFX = window.PFX || {}) – pfx Aug 28 '18 at 17:30
I have updated my question with additional code based on your answer for better clarification of the current state. – JackTheKnife Aug 28 '18 at 17:40
The `postbox` in your viewmodels, is that one that same as `window.postbox`? – pfx Aug 28 '18 at 17:50
I think so - other way it will throw that `postbox` is undefined. There is no other `postbox` declaration in the code. – JackTheKnife Aug 28 '18 at 17:56
`postbox` comes as `Object {NewValueAvailable: }` so I think has correct state. No clue why subscribers are not notified then. – JackTheKnife Aug 28 '18 at 18:20
Notice that you set `postbox` to `= new ko.subscribable();` instead of `= ko.observable();`. – pfx Aug 28 '18 at 18:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178958/discussion-between-jacktheknife-and-pfx). – JackTheKnife Aug 28 '18 at 18:50

KnockoutJS and PubSub to update observable array between views

1 Answers1

Linked