PubSub in jQuery with Custom Events

Demo: PubSub in jQuery

Recently I did a post on Data Binding in JavaScript using the YUI3 Library as my base. h3 and MikeInVB wanted to see it in jQuery, so I rewrote it and it turns out is a great example of PubSub (publish / subscribe) for jQuery.

For this example, we’re using an object named DB, which is short for DataBind. Basically it’s an object with getters and setters.

  var DB = function (data) {
      this._d = null;

      this.set = function (data) {
           this._d = data;
      };

      this.get = function () {
          return this._d;
      };

      this.set(data);
  };

Really, this is just an abstracted way to store data. To create an instance of it, set it and get the value back, we would do something like:

var myData = new DB();
myData.set("We can't fight in here, this is a war room!");
console.log(myData.get();) // "We can't fight in here, this is a war room!"

But lets say, we want to subscribe to this data object, and be notified whenever it changes. Instead of polling it and checking to see if the value is the same as last time, we can use jQuery’s custom events to trigger a custom event.

  var DB = function (data) {
      this._d = null;

      this.set = function (data) {
           this._d = data;
           // notify all subscribers when this function is used
           $(this).trigger("change");
      };

      this.get = function () {
          return this._d;
      };

      this.set(data);
  };

Now, we can subscribe to it like this:

$(myData).bind("change", function() {
     alert("The data was changed!");
});

Additionally, we can access that data in our handler:

$(myData).bind("change", function() {
     alert("My data was set to " + myData.get());
});

You can set up any number of subscribers to myData this way now, and they’ll be triggered when that instance is set().

If you want to further improve DB, you can add a function to make it easier to attach change events, jQuery style:

  var DB = function (data) {
      this._d = null;

      this.set = function (data) {
           this._d = data;
           // notify all subscribers when this function is used
           $(this).trigger("change");
      };

      this.get = function () {
          return this._d;
      };

      // shortcut for functions trying to bind to the change custom event
      this.change = function (fn) {
          $(this).bind("change", fn);
      };

      this.set(data);
  };

With our new shortcut, we can subscribe to it like this:

var alexSez = new DB();
alexSez.set("Initiative comes to thems that wait.");
alexSez.change(function() {
    alert("Alex says: '" + myData.get() + "'");
});
alexSex.set("Welly, welly, welly, welly, welly, welly, well. To what do I owe the extreme pleasure of this surprising visit?")
// an alert will come up that says "Alex says: 'Welly, welly, welly, welly, welly, welly, well. To what do I owe the extreme pleasure of this surprising visit?'".

In the same way, you can set up two input boxes to “share” the same value by subscribing to a shared instance of DB like this:

  var myData = new DB();

  var inputs = $("#in1, #in2");
  myData.change(function() {
      inputs.val(myData.get());
  });

  inputs.bind("keyup", function(ev) {
      myData.set($(ev.target).val());
  });

Ta da!

If you’re still interested in PubSub for jQuery, I recommend checking out Jamie Thompson’s example using the $(document) namespace instead of specific object instances, or Peter Higgin’s jQuery.pubsub, which reportedly is significantly faster, although doesn’t allow object specific subscribing.

Demo: PubSub in jQuery

What do you think? Would you do this differently? Leave a comment, I read them all!