X

Geertjan's Blog

  • February 11, 2016

Intermodular Communication in Oracle JET (Part 1)

Geertjan Wielenga
Product Manager

A few days ago I did a session on Oracle JET for a group of about 80 attendees, members of "Oracle Group Holland", and I met Herman Brunnekreef from Whitehorses in the Netherlands. He's been doing some great blogging on Oracle JET. He asked me about communication between modules in Oracle JET, i.e., how that can be implemented.

JB Brock has provided a few pointers about this in the Oracle JET forum and today I created a small example to show one aspect of this. Here below you see a single page application in the browser, which is built up from two separate HTML files:

Here's the "index.html", showing that Oracle JET is going to load two HTML files (there's no JavaScript backing those HTML files, hence I am using "viewName" instead of "name" below):

<body>
<div data-bind="ojModule: { viewName: 'home'}"></div>
<div data-bind="ojModule: { viewName: 'response'}"></div>
</body>

In the "require" block, i.e., in "main.js", I have defined some observables that I want to be available globally, i.e., to all my modules:

require([
'ojs/ojcore',
'knockout',
'jquery',
'ojs/ojknockout',
'ojs/ojmodule'],
function (oj, ko, $)
{
function RootViewModel() {
var self = this;
self.userName = ko.observable();
self.userCity = ko.observable();
self.userState = ko.observable();
}
$(document).ready(
function ()
{
ko.applyBindings(new RootViewModel());
}
);
}
);

And now I can refer to the above variables within my HTML pages. Here's "home.html":

<h2>Entry Form</h2>
<p>Name: <input data-bind="textInput: $root.userName"></input></p>
<p>City: <input data-bind="textInput: $root.userCity"></input></p>
<p>State: <input data-bind="textInput: $root.userState"></input></p>
<hr>

And here's "response.html":

<h2>User Details</h2>
<p>Name: <span data-bind="text: $root.userName"></span></p>
<p>City: <span data-bind="text: $root.userCity"></span></p>
<p>State: <span data-bind="text: $root.userState"></span></p>

The above means that whenever something is typed in "home.html", the global variable defined in "main.js" is updated, while in "response.html" we're hooked into those same global variables, so that the update is automatically received.

Like everything else in Oracle JET, this is nothing new. It's simply how Knockout works. I will be blogging more about this in the coming days to illustrate the other solutions pointed out by JB Brock in the Oracle JET forum.

Continue to part 2...

Join the discussion

Comments ( 1 )
  • guest Tuesday, August 2, 2016

    Hi,

    Can you share the code snippet for accessing the value of global variable: self.userName using Java Script or Jquery in other Viewmodel.js File

    Thanks,

    Satish.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha