Question

Regarding the BoilerplateJs example, how should we adjust those modules to be intercommunicate in such a way once the user done any change to one module, the other related modules should be updated with that change done.

For example, if there is a module to retrieve inputs from user as name and sales and another module to update those retrieved data in a table or a graph, can you explain with some example ,how those inter connection occurs considering event handling?

Thanks!!

Answer 1

In BoilerplateJS, each of your module will have it’s own moduleContext object. This module context object contains two methods ‘listen’ and ‘notify’. Have a look at the context class at ‘/src/core/context.js’ for more details.

The component that need to ‘listen’ to the event, should register for the event by specifying the name of the event and callback handler. Component that raise the event should use ‘notify’ method to let others know something interesting happened (optionally passing a parameter).

Get an update of the latest BoilerplateJS code from GitHub. I just committed changes with making clickCounter a composite component where ‘clickme component’ raising an event and ‘lottery component’ listening to the event to respond.

Code for notifying the Event:

moduleContext.notify('LOTTERY_ACTIVITY', this.numberOfClicks());

Code for listening to the Event:

moduleContext.listen("LOTTERY_ACTIVITY", function(activityNumber) {
   var randomNum = Math.floor(Math.random() * 3) + 1;
   self.hasWon(randomNum === activityNumber);
});