如何在小部件事件處理程序中訪問小部件選項中保存的數據

Question

我將數據保存在選項變量中，但是在選擇列表 的事件（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

(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. 啓用上下文記住Widget的這個作爲背景（或自如果願意的話）需要的時候
3. 傳遞上下文jQuery的方式給事件處理程序
4. 提取物根據需要處理側
5. 訪問控件數據
6. 調用插件的方法

Answer 3

您也可以在事件處理程序中簡單地執行此操作（例如，對於自動填充小部件）

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

    ... 
}