ウィジェットイベントハンドラ内でウィジェットオプション内に保持されているデータにアクセスする方法

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. からコンテキストを有効に
3. に必要なときにイベントハンドラ
4. 抽出するためにjQueryの方法でコンテキストを渡しますハンドラ側
5. ウィジェットデータにアクセスする
6. 必要に応じてウィジェットメソッドを呼び出す

Answer 3

また、イベントハンドラでこれを行うこともできます（例：自動完成ウィジェットの場合）

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

    ... 
}