Scope Correction with YUI

The more I use the Yahoo User Interface Library (YUI), the more I am impressed with it. I have been converting my JQuery imValidateForm plugin to a YUI widget for a project that I am working on. I ran into a scope issue when a button was clicked. I have dealt with Javascript scope issues in the past, but I did not know how to fix it using YUI.  For those of you who are not familiar, the ‘this’ keyword within a function refers to the object itself.

?View Code JAVASCRIPT
function artist() {
     this.name = ‘Bob Marley’;
}

In the example above, the ‘this’ keyword refers to the artist object. Here’s a more complex example:

?View Code JAVASCRIPT
function cart(id) {
     this.selectedItem = id;
     var btnSubmit = document.getElementById(‘submit’);
     btnSubmit.onclick = function() {
          var selected = this.selectedItem;
     };
}

Javascript does not know what ‘this.selectedItem’ is because the ‘this’ is in the scope of the btnSubmit object. To get around the scope issue, I can do the following:

?View Code JAVASCRIPT
function cart(id) {
     this.selectedItem = id;
     var self = this;
     var btnSubmit = document.getElementById(‘submit’);
     btnSubmit.onclick = function() {
          var selected = self.selectedItem;
     }
}

‘self’ is the cart object, not the submit button. Simple scope correction. But there are times when Javascript applications become so complex that scope correction is not this easy. In these situations, I have to do more than add self = this. I found a simple function that handles scope correction:

?View Code JAVASCRIPT
function cart(id) {
     this.selectedItem = id;
     var self = this;
     var btnSubmit = document.getElementById(‘submit’);
     btnSubmit.onclick = function() {
          bindCallBack(getAlbums, self, self.selectedItem);
     }
     this.getAlbums = function(id) {
 
     };
}
function bindCallBack(fn, scope) {
     var args = [];
     for (var n = 1; n < arguments.length; n++)
          args.push(arguments[n]);
     return function () { return fn.apply(scope, args); };
}

Without the bindCallBack function, the button would be able to ‘see’ the getAlbums method because it is out of scope. (Note: I can also use the bindCallBack function to pass parameters to the getAlbums).

The YUI way

So I didn’t want to deal with scope correction when creating my YUI widget, but as it turns out, I did not have to because YUI has automatic scope correction.

?View Code JAVASCRIPT
function cart() {
     this.selectedItem = null;
     var btnSubmit = YAHOO.utils.Dom.get(‘submit’);
     btnSubmit.on("click", this.getAlbums, this, true);
     this.getAlbums = function() {
 
     };
}

By adding ‘this’ (the cart object) and ‘true’ to the click event, the execution scope of the button click is now the cart object. Easy. Try it yourself.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks