javascript subscribe to callback function after instanciation

Question

I have a Javascript Object made this way:

function App(callback){

// Call some "long running functions meant for initialization
callback(this);

}

In my main Template page (_Layout.cshtml on ASP MVC) I instanciate it like this:

_Layout.cshtml

var oApp = new App(function(initializedApp){

    // Instanciate here other Javascript components that depend on 
    // App initialization
    var oComponent1 = new Component1(initializedApp);
});

This works fine ! Component1 is initialized afte App has finished initializeing and all goes fine.

Proble rises in Page1.cshtml (which is rendered inside _Layout.cshtml and have access to oApp). Page1 also has to initialize its own component that need App to be fully initialized.

Page1.cshtml

// How do I "subscribe to the App callback function so that Compnent2, s
// specific to the Page1.cstml, is initialized afetr App has finished
// its initialization ???
var oComponent2 = new Compnent2(oApp);

oApp.callback(); // ???
oApp(function(initializedApp){ // code here... });  //???

Thanks

Lorenzo

score 0 · Answer 1 · edited May 23 '17 at 10:30

Your running with an interesting pattern. I would suggest using a more unobtrusive way of initializing and calling javascript. I would say most JS calls in CSHTML can be considered code smell.

Anyway, I will answer your question. I would change App to have the ability to register callbacks:

function App(callbacks)
{
    var self = this;
    self.callbacks = [];
    self.addCallbacks = function(newCallbacks)
    {
        //allow either a single callback or an array of callbacks
        if(isFunction(callbacks)
        {
            self.callbacks.push(newCallbacks); //single callback
        }
        else
        {
            for(var i = 0; i < newCallbacks.length; i++)
            {
                //theoretically, you can have multi-dimensional arrays of callbacks, but that's just excessive
                self.addCallbacks(newCallbacks[i]);
            }
        }
    };
    self.addCallbacks(callbacks);

    //some point later, call all the callbacks:
    for(var i = 0; i < self.callbacks.length; i++)
    {
        self.callbacks[i](this);
    }
}

Then, in your Page1.cshtml:

var oComponent2 = new Compnent2(oApp);
var mycallback = function(initializedApp){ // code here... };
oApp.addCallbacks(mycallback);

//or, if you have many callbacks to register:
var mycallbacks = [
    function(initializedApp){ // code here... },
    function(initializedApp){ // code here... }
];
oApp.addCallbacks(mycallbacks);

isFunction borrowed from here:

var isFunction = function(functionToCheck) 
{
    var getType = {};
    return functionToCheck && getType.toString.call(functionToCheck) === '[object   Function]';
}

How does this prevents Component2(...) to be initialized after App finishes its initialization process ? — l.raimondi, Nov 16 '16 at 12:46
You can move the creation of `oComponent2` into the callback you registered: `var oComponent2; oApp.addCallbacks( function(oApp) { oComponent2 = new Compnent2( oApp ); } );` — James Haug, Nov 16 '16 at 13:55
Thanks James, I'll give it a try. So far I used a different workaround, but anyway I'll try your code. — l.raimondi, Nov 17 '16 at 07:57

javascript subscribe to callback function after instanciation

1 Answers1