How to access data stored in widgets when inside a widget event handler

Question

I have data stored in the options variable, but in the event (OnChange) of the select list, this refers to DOMElement, and therefore this.options refers to the list of objects.

everywhere i can have

var o = this.options;

but it is useless in this context.

How to get / set widget information?

Answer 1

Use the method this._on()to bind the handler. This method is provided by jQuery UI factory widgets and ensures that inside the handler function it thisalways refers to the widget instance.

_create: function () {
    ...
    this._on(this.selectElement, {
        change: "_onChange" // Note: function name must be passed as a string!
    });
},
_onChange: function (event) {
    // 'this' is now the widget instance.
},

Answer 2

(, )

select: function(event, ui) {
   var options = jQuery(event.target).data("autocomplete").options;

   ...
}

Answer 3

(function($){
    $.widget(
        "ui.my_ui_widget", 
        {
            //------------------------------------------------------------------
            _init : function(){
                var o = this.options; // 2
                o.context = this;
                ...
                // 3
                $('#'+o.id).bind('change', {context:this}, this.on_change );
                ...
            },
            //------------------------------------------------------------------
            on_change: function(event) {
                var context = event.data.context; // 4
            var o       = context.options;

                o.id = ''; // 5

                var sel = this; // event handler context
                var selectedIndex = sel.selectedIndex;
                if (selectedIndex < 0) return;

                o.id = sel.options[selectedIndex].value; // 5

                context.update_ui(); // 6
            },
            //------------------------------------------------------------------
        } 
    );
    //--------------------------------------------------------------------------
    $.extend( $.ui.my_ui_widget, {
        getter       : "id",
        getterSetter : "xxx, yyy",

        defaults : {
               ...
             context   : undefined, // 1
             ...
             on_change : undefined,
               ...
            }
        }
    );
    //--------------------------------------------------------------------------
})(jQuery);

$(document).ready(function() {
    $('.my_ui_widget').each( function(i) {
            var id = this.id;
            var mode = '';

            try{
                mode = this.attributes['mode'].value;
            } catch(err) {
                mode = 'unlinked';
            }

            $('#'+id).my_ui_widget( {id:id, mode:mode} );
        }
    );
});

• Include context from the start
• Remember the widget as context (or "I" if you want)
• Pass context in jQuery for event handler
• Extract if necessary on the processor side
• Access widget data
• Call widget methods if necessary