In my project, I have implemented two modal views - MyModalViewA (parent) and MyModalViewB (child).
The MyModalViewA spawns MyModalViewB as a custom binding, along with an observable array that needs to be updated. Here is what the code 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;
}());
Next, let's look at 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 retrieving rows
//and I need to update rows from MyModalViewA
}
module.exports = MyModelViewB;
}());
After referring to a suggestion on synchronizing view models in Knockout, I attempted to use PubSub for updating
this.rows= ko.observableArray([]);MyModelViewA.
I added var postbox = ko.observable(); to the constructor variables of MyModelViewA. Then, in MyModelViewA, I included:
postbox.subscribe(function(newValue) {
this.rows.push(newValue);
}, this);
And in MyModelViewB, I added:
this.results = ko.observableArray([]);
this.results.subscribe(function(newValue) {
postbox.notifySubscribers(newValue);
});
However, both views were not receiving the value of newValue, and MyModelViewA's this.rows was not being updated when hardcoded in MyModelViewB.
At this point, I am unsure if the solution provided in the link above is working correctly.
Edits
I added the following code snippet to the top of my modules bundle:
var postbox = new ko.subscribable();
As the below code was causing an error:
(function($) { $(function() {
window.postbox = new ko.subscribable();
});
});
The error message stated: "Cannot read property 'subscribe' of undefined"
Then, in the module for MyModalViewA, I simplified the version based on 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, I added:
var newRow = "testing123";
postbox.notifySubscribers(newRow, "NewRowAvailable");
Upon debugging the code, it was observed that postbox was defined as Object {NewValueAvailable: }, but notifySubscribers was not updating the subscribable.
Any insights or suggestions on how to resolve this issue?