Howto access data held in widget options when inside a widget event handler

Question

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

everywhere else I can have

var o = this.options;

but this is no use in this context.

How to get/set the widget information ?

Answer 1

(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} );
        }
    );
});

1. Enable context from the beginning
2. Remember the widget's this as context (or self if preferred)
3. Pass the context in the jquery way to event handler
4. Extract when needed on the handler side
5. Access the widget data
6. Call widget methods as needed