Using jquery Callbacks.fire method as a event handler

Question

So I've got a jquery project where I'm using an external class that has callback style events. Meaning, it has an "onSave" property that takes one function. However, I need to more than one other component to hook into it.

What I've settled on for now, goes like this:

var saveCallbacks = $.Callbacks();
saveCallbacks.fire.callbacks = saveCallbacks;
globalDoodad.onSave = saveCallbacks.fire;

which allows me to do this in my other components:

globalDoodad.onSave.callbacks.add( myMethod );

Is there a better, or at least more standard, way to handle this? It seems to be working ok, just has a bit of a smell to it.

Answer 1

I think what you need is a global pub-sub facility. Modules you have subscribe to certain events. These subscriptions (functions) get executed when that event is published, usually with data.

This allows different modules, from different parts of your program, to interact even without direct visibility with each other. The only dependency visible to your modules is the pub-sub module.

For instance this:

// ModuleA.js
PubSub.module('moduleA',function(tower){
  tower.subscribe('foo',function(data){
    // executes when somewhere else publishes a foo
    alert('foo executed in A with ' + data.join(' '));
  });
});

// ModuleB.js
PubSub.module('moduleB',function(tower){
  tower.subscribe('foo',function(data){
    // executes when somewhere else publishes a foo
    alert('foo executed in B with ' + data.join(' '));
  });
});

// ModuleC.js
PubSub.module('moduleC',function(tower){
  $(document).on('click',function(){
    // publish a foo event, passing 1 and 2, which arrives as "data" in each handler
    tower.publish('foo','1','2');
  });
});

---

jQuery has built-in event-handling capabilities, which also allow custom events. You can use this ability as your pub-sub facility.

var test = $(document);            // You can bind it to any object. document is handy.
test.on('sampleevent',function(){  // Add a handler
  alert('executed');
});

test.trigger('sampleevent');       // Execute

You can also implement your own, which doubles as a good programming practice. Here's my version of it, which I based on Node.js's EventEmitter.