Question

In my application, I have a few different widgets. When one makes a change, the others need to change as well. I’d like to keep them decoupled. I haven’t done too much javascript programming, so I’m not really sure what the typical ways of doing this.

Are there any queueing mechanisms in jquery so I can post an event that says “prop X changed value Y” and anyone registered to that queue can be notified? Or is this not a typical way of handling events in javascript?

Answer 1

In jquery it is straightforward and you take use of the same mechanisms as for standard events.

//register listener for "widget"
$("div#firstWidget").bind("myCustomEvent", function(e){
    alert(e.customFlag);
});

//somewhere else trigger event on widget
var e = $.Event("myCustomEvent");
e.customFlag = "customValue";
$("div#firstWidget").trigger(e);

You could also provide a global event bus creating emtpy jquery object to hold and dispatch events

window.myEventBus = $([]);

//register listener
myEventBus.bind("customEvent", function(e){
    //handle event
});

//fire event
myEventBus.trigger($.Event("customEvent", { numProp:5, boolProp:true }));