Inpsect this page and copy the script tag, found in head tag, that ends in "main.js"
At the beginning of the head tag.
The main purpose of this library is to mediate communication between different apps. The Library is nothing more than a messenger.
At the beginning of the head tag.
Considering the following app example. The methods ObserverReady and DetachingApp should be part of the app instance or else the app will not know when it's attached or detached from the observer mechanism.
`javascript
function MyApp() {
var self = this;
self.doSomething = function () {
console.log(arguments);
}
self.ObserverReady = function(appReference, observerReference) {
appReference.attachListener('myevent', self.doSomething.bind(self));
}
self.DetachingApp = function (appReference, observerReference) {
appReference.detachListener('myevent');
}
}
var appInstance = new MyApp();
`
We can use a predefined object to initialize:
javascript
window.Observables = window.Observables || {apps: [{
instance: appInstance,
name: 'test'
}]};
We can push the app in order to subscribe it:
`javascript
window.Observables.apps.push({
instance: appInstance,
name: 'test'
});
// we can even subscribe various apps in the observer at once
window.Observables.apps.push({
instance: appInstance,
name: 'test'
}, {
instance: myOtherApp,
name: 'test2'
});
`
Or we can subscribe it to the instance directly:
javascript
window.Observables.observerInstance.subscribe('test', appInstance);
`javascript
//the callback could be async if wanted.
const callbackFunction = async (data) => {
//do something with the event
return null; //something if you want
}
appReference.attachListener('myevent', callbackFunction);
appReference.detachListener('myevent');
`
`javascript
const myData = {test: true}// could be anything you want to pass as param
observerReference.subscribe('appName', appInstance);
observerReference.triggerCallback('eventName', myData, (returns) => { // returns is an array of return values provided by all // the listeners of this event, or the first one if we // enable stop at first }, { stopAtFirst: false //by default });
const returns = await observerReference.trigger('eventName', myData) //same like the triggerCallback but with promise
observerReference.isAppReady('appName')
// returns a boolean stating whether a specific app is
// ready or not (useful if our app initializes after,
// we can easily check if that app is ready)
`
The observer will push OBSERVER:APP:ATTACHED
with the app name of the app that got attached.
As well the observer will push OBSERVER:APP:DETACHED
with the app name of the app that got detached.