X

Geertjan's Blog

  • February 13, 2016

Intermodular Communication in Oracle JET (Part 3)

Geertjan Wielenga
Product Manager

In this part, continuing from the same theme introduced in part 1 and part 2, we're going to implement yet another approach to intermodular communication by applying the solution published earlier today by Lukas Jellema from AMIS, using knockout-postbox

To get started, we'll use Bower to download "knockout-postbox" into our application. If you don't have a 'bower.json' and '.bowerrc', go to the New File dialog and create those files. In '.bowerrc', point to the directory where the other libraries are already found, i.e., "public_html/js/libs", so that "knockout-postbox" will be placed in the central library location within your application.

Right-click the project, choose Properties, and use the Bower tab to install "knockout-postbox", as shown below:

In the "requirejs.config" section in "main.js", refer to the path of "knockout-postbox":

'knockout-postbox': 'libs/knockout-postbox/build/knockout-postbox',

Now you can publish/subscribe. For example, here's an "ojTable" (for details on the table below, see this earlier blog entry), notice the bits in bold:

define(['ojs/ojcore', 'knockout', 'ojs/ojtable', 'knockout-postbox'
], function (oj, ko) {
function dataContentViewModel() {
var self = this;
var depts = [
{id: 10, name: 'Administration', manager: 'Tom'},
{id: 20, name: 'Marketing', manager: 'Dick'},
{id: 30, name: 'Purchasing', manager: 'Harry'}
];
self.datasource = new oj.ArrayTableDataSource(depts);
self.deptRowListener = function (event, ui) {
var newCurrentRow = ui.currentRow;
self.datasource.at(newCurrentRow['rowIndex']).
then(function (rowObj) {
var obj = rowObj['data'];ko.postbox.publish("departmentSelection",
{ 'id': obj.id,
'name': obj.name
});

});
};
}
return dataContentViewModel;
});

And here's a second module, where we're subscribed to the same topic, i.e., "departmentSelection", and thus able to be notified of changes, which can then be rendered in the view:

define(['ojs/ojcore', 'knockout', 'knockout-postbox'
], function (oj, ko) {
function responseContentViewModel() {
var self = this;
self.id = ko.observable();
self.name = ko.observable();ko.postbox.subscribe("departmentSelection", function (newValue) {
self.id(newValue.id);
self.name(newValue.name);
});

}
return responseContentViewModel;
});

A very nice solution, thanks Lukas for investigating this and introducing it to the context of Oracle JET.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.