Как получить доступ к данным, хранящимся в параметрах виджета внутри обработчика события виджета

Question

У меня есть данные, хранящиеся в переменной options, но в событии (OnChange) списка выбора это относится к DOMElement и, следовательно, this.options относится к списку объектов.

везде, где я могу иметь

var o = this.options;

но это бесполезно в этом контексте.

Как получить / установить информацию о виджете?

Answer 1

Используйте метод this._on() для привязки обработчика. Этот метод предоставляется фабрикой виджетов пользовательского интерфейса jQuery и гарантирует, что в функции обработчика this всегда ссылается на экземпляр виджета.

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

1. Включить контекст с начала
2. Помните, что виджет это как контекст (или себя, если предпочитаете)
3. Передать контекст способом jquery в обработчик событий
4. Извлечение при необходимости на стороне обработчика
5. Доступ к данным виджета
6. Вызывать методы виджета по мере необходимости