jQuery Forum

I have a really annoying scope issue for my JQuery Widget. Essentially I need to access the widget instance (this) inside of my map/object `options`.

Is it possible to do this? Any advice how I can achieve this? See this JSFiddle for a demo of the problem.

1.     $.widget( "my.myWidget", {
2.         // Below 'this.defCallback' will be undefined
3.         // How can I store 'this' (the widget instance) in a variable??
4.         options: {
5.             //accessObjectParent: this.instantiator,
6.             isUndefined: (this.defCallback === undefined), // this refers to the map/object
7.             // Can I access the maps 'parent'/instantiator?
8.             // this.instantiator.defCallback ???
9.             callback: this.defCallback  // allow user to overwrite/provide custom callback
10.         },
11.        
12.        
13.         ....
14.        
15.        
16.         defCallback: function() {
17.             console.log('defCallback');
18.         }
19.     });

If I had a nested function I know I can easily solve this but I have a nested object/map which makes things difficult.

1.     function foo {
2.         var _this = this;
3.        
4.         ...
5.        
6.         var bar = function() {
7.             // easily access this
8.             _this.defCallback();
9.            
10.             ...
11.         }
12.     }

Usage:

1.     $('<div></div>')
2.         .myWidget();  // use defCallback
3.        
4.     $('<div></div>')
5.         .myWidget({
6.             callback: function() {
7.                 ...
8.             }
9.         });  // use custom callback

How the callback function is 'bound' and called:

1.         _create: function() {
2.             this.element.click( this.options.callback );
3.         }