Several months ago I wrote about event binding using ExtJS or Sencha touch. Something that you may or may not know is that you can achieve the same thing with jQuery using custom even binding.
In case you didn’t see my Sencha post about this, or if you don’t work with Sencha, let me tell you what I mean by event binding. Event binding can be used to loosely couple actions so they never break. Essentially, you broadcast to your entire application “Hey! I have something to say! Does anybody want to hear it?” Your modules can either say “Hey, I’d like to hear what you have to say” or else, they can just ignore it. Either way, nothing breaks. You can even have several modules respond to the same event in different ways.
So, on to the code… Make sure that you are using an up to date version of the jQuery library. At some point back in time, this didn’t work yet.
To create a custom event with jQuery, you can use the “trigger” function like this:
$(document).trigger('my-custom-event', ['hi! I am a custom variable!']);
You can actually bind a custom event to any DOM element, but for the sake of making it available to your entire application, the document object is usually a pretty safe choice. As you can see, we are also passing a variable.
Now you just need to have a listener at any place in your code that is executed before the trigger event, like this:
$(document).bind('my-custom-event', function(v) {
alert(v);
});
So your code ends up looking something like this:
$(document).bind('my-custom-event', function(v1, v2) {
alert(v1);
});
$(document).bind('my-custom-event', function(v1, v2) {
alert('firing ' + v2);
});
$(document).trigger('my-custom-event', [
'Hi! I am a custom variable!',
'Hi! I'm a different custom variable!'
]);
You should now see two separate alerts fired from the same trigger. Now all you have to do is bind custom events to your individual modules and they will never touch again. Feel powerful yet?
Having worked on several large scalable JavaScript and Ajax application over the past couple of years, I’ve started to form a definite opinion about what an application needs in order to be truly scalable and ultimately successful. So what does your application need?
It’s no secret that web developers don’t lead a very active lifestyle. In fact, from the day I entered college until a couple of weeks ago, I had gained almost 25 pounds thanks to my lack of activity and disregard for the effects of food on my body.
I recently had the need to override all of my links on a Sencha Touch app with an onClick event. I needed to be able to open the links using the ChildBrowser plugin for PhoneGap. The problem was that I needed to grab the links before I rendered the content to the page and apply the onClick event instead of the href.
For some reason, I keep watching episodes of a television show called “Hoarders.” If you haven’t seen it, it’s about people who collect stuff. Collecting stuff is one thing, but these people have no organizational system for the items that they collect. They literally have piles of so much useless junk that their houses become essentially unlivable. Many of them don’t even have a single walkway to navigate through their homes. They could lead better lives, but they are unwilling to let go of their material possessions.