Question

我在options变量中保存了数据，但是在选择列表的事件（OnChange）中这指的是DOMElement，因此this.options引用了对象列表。

我可以拥有的其他地方

var o = this.options;

但在这种情况下没有用。

如何获取/设置窗口小部件信息？

Answer 1

使用this._on() method绑定处理程序。此方法由jQuery UI小部件工厂提供，并将确保在处理程序函数中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} );
        }
    );
});

从头开始启用上下文
请记住小部件的内容（或首选的自我）
以jquery方式将上下文传递给事件处理程序
在处理程序端需要时提取
访问小部件数据
根据需要调用窗口小部件方法

如何在窗口小部件事件处理程序中访问窗口小部件选项中保存的数据

3 个答案: