Javascript Closures and *static* classes problem

Question

I have a static class which contains an array of callback functions, I then have a few other classes that are used to interact with this static class...

Here is a simple example of the static class:

var SomeStaticInstance = {};
(function(staticInstance) {
    var callbacks = {};
    staticInstance.addCallback = function(callback) { callbacks.push(callback); }
    staticInstance.callAllCallbacks = function() { /* call them all */ }
}(SomeStaticInstance));

Then here is an example of my other classes which interact with it:

function SomeClassOne() {
    this.addCallbackToStaticInstance = function() { SomeStaticInstance.addCallback(this.someCallback); }
    this.someCallback = function() { /* Do something */ }
    this.activateCallbacks = function() { SomeStaticInstance.callAllCallbacks(); }
}

function SomeClassTwo() {
    this.addCallbackToStaticInstance = function() { SomeStaticInstance.addCallback(this.someOtherCallback); }
    this.someOtherCallback = function() { /* Do something else */ }
    this.activateCallbacks = function() { SomeStaticInstance.callAllCallbacks(); }
}

Now the problem I have is that when I call either class and tell it to activateCallbacks() the classes only activate the callbacks within their own scope, i.e SomeClassOne would call someCallback() but not someOtherCallback() and vice versa, now I am assuming it is something to do with the scope of the closures, however I am not sure how to get the behaviour I am after...

I have tried turning the static class into a regular class and then passing it into the 2 classes via the constructor, but still get the same issue...

So my question is how do I get the classes to raise all the callbacks

-- EDIT --

Here is an example displaying the same issue as I am getting on my actual app, I have put all script code into the page to give a clearer example:

http://www.grofit.co.uk/other/pubsub-test.html

It is a simple app with 2 presenters and 2 views... one view is concerned with adding 2 numbers at the top of the page, the 2nd view is concerned with taking that total and multiplying it and showing a result.

The 3rd party library I am using is PubSubJS, and the first presenter listens for an event to tell it that the one of the boxes has changed and re-totals the top row. The 2nd presenter listens for when the multiply or total at the top changes, then recalculates the bottom one. Now the first presenter recalculates correctly, and the 2nd presenter will correctly recalculate whenever the multiply box changes, HOWEVER! It will NOT recalculate when the total on the top changes, even thought it should receive the notification...

Anyway take a quick look through the source code on the page to see what I mean...

Answer 1

First, I think you want var callbacks = [] (an array instead of an object) since you're using callbacks.push().

I'm not sure I understand your problem. The way your classes are structured, you can achieve what you want by instantiating both classes and calling addCallbackToStaticInstance() on both new objects. E.g.,

var one = new SomeClassOne();
var two = new SomeClassTwo();
one.addCallbackToStaticInstance();
two.addCallbackToStaticInstance();
one.activateCallbacks();

Then, as above, you can call activateCallbacks() from either object.

If you're saying you want to be able to call activateCallback() after instantiating only one of the classes, you really have to rethink your approach. I'd start with moving addCallbackToStaticInstance() and activateCallbacks() into their own class.

Answer 2

This is a very odd way of doing things, but your main problem is that your callbacks object it not part of SomeStaticInstance, it is defined within an anonymous closure. Also your callbacks object {} should be an array [].

try staticInstance.callbacks = []; instead of var callbacks = {};

and

staticInstance.addCallback = function(callback) { 
  this.callbacks.push(callback); 
}