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...

This is all abstract code btw, it is a simpler version of another question i have on here that no one is answering, in my real code the static is a 3rd party library I am using and the 2 instances are actually many presenter/view classes... — Grofit
– Grofit, Commented Apr 30, 2011 at 13:37
your pseudo code works. It's a subtle issue with your real code we can't fix unless we see what library your using. Try to reproduce problems like this in jsfiddle — Raynos
– Raynos, Commented Apr 30, 2011 at 14:10
Written up a complete example showing my problem and edited my main question to show this, I didnt do this initially incase it was something simple and I was being an idiot. As it appears it should work I have added this to try and help find out what the actual problem is... Thanks for your help so far! — Grofit
– Grofit, Commented Apr 30, 2011 at 15:24
I was wrong, it was working... I was just not calling the change() event manually after calling val(x), so maybe that could be part of the problem in my app, although I doubt it is... anyway as far as THIS problem goes, you are right... it does work so given you the answer! — Grofit
– Grofit, Commented Apr 30, 2011 at 17:47

squidbe · Accepted Answer · 2011-04-30 10:55:24Z

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.

answered Apr 30, 2011 at 10:55

squidbe

1,0101 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grofit Over a year ago

I am wanting to use it as you mentioned above, it is just not working... that is why I am baffled... if it should work then I will try changing over the callbacks...

Raynos Over a year ago

@Grofit See an example that uses Backbone.Events as a static callback manager. The code works fine.

squidbe Over a year ago

Grofit, try adding simple alerts into someCallback/someOtherCallback, e.g., alert('someCallback'), alert('someOtherCallback'). Using the code I provided above, I get both of those alerts. EDIT: Oops, just saw that you addressed the issue.

herostwist · Accepted Answer · 2011-04-30 10:32:49Z

0

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); 
}

answered Apr 30, 2011 at 10:32

herostwist

3,9781 gold badge30 silver badges36 bronze badges

1 Comment

Grofit Over a year ago

isnt the var callbacks = {} just telling it that its a private member of the static class? if I were to make it StaticInstance.callbacks then it would be public right? not that it matters that much if it is...

Collectives™ on Stack Overflow

Javascript Closures and static classes problem

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related