jQuery-ui widget factory, event handlers and that

Question

I've been developing a few jQuery widgets recently but 2 things have been bothering me and so I'm coming to you hoping you'll have a nicer way to do it.

1) I quite like the fact of using "that" instead of this. Makes the code much clearer and avoid quite a lot of bugs. To make it simple I always use "that" as this of the widget. However I don't know how to make my "that" global so what I do is:

$.widget("widgetName", {
    method1: function() {
        var that = this;
    },
    method2: function() {
        var that = this;
    }
});

As you can see that's heavy in code and not much better. I was wondering if i was valid to do:

 var that = $.widget("widgetName", {
     method1: function() {
         //do something
     },
     method2: function() {
         //do something
         that.method1();
     }
  });

Or will that pose any problem? If that is impossible how do you think is the best way to do it?

2) This is really linked to my first question and an answer to it should be enough: For my event handlers I often need to use my "that" to call methods for eg. So what I currently do is

 $.widget("widgetName", {
     _handlers: {},
     _create: function() {
         var that = this;
         that._handlers: {
             handler1: function(e) { 
                 //do something
                 that.method();
             } //...
         };
         that.on("event", that._handlers.handler1);
     },
     method: function() {}
 });

Do you see a nicer way I could do this? My big need is to be able to move the whole initialization of that._handlers out of that._create

These are quite open questions. I'm really trying to find a way to make my jquery widget really clear and maintainable and I'm curious to know how people do.

Thanks a lot for your opinion on this.

Answer 1

To expand on my comment, here's how you could bind your handlers to preserve this

 $.widget("widgetName", {
     _handlers: {},
     _create: function() {
         this._handlers.handler1 = $.proxy(function(e) { 
                 //do something
                 this.method();
         }, this);
         this.element.on("event", this._handlers.handler1);
     },
     method: function() {}
 });

Or you could swap that around allowing for easily overriding the handlers for 3rd party developers:

 $.widget("widgetName", {
     _handlers: {
         handler1: function(e) { 
             //do something
             this.method();
         }
     },
     _create: function() {
         this.element.on("event", $.proxy(this._handlers.handler1,this));
     },
     method: function() {}
 });

Edit: And if you really want a global that variable, here's one way to do it without polluting the global scope:

(function($){
     var that;
     $.widget("widgetName", {
         _handlers: {
             handler1: function(e) { 
                 //do something
                 that.method();
             }
         },
         _create: function() {
             that = this;
             this.element.on("event", this._handlers.handler1);
         },
         method: function() {}
     });
})(jQuery);