jQuery-ui：我如何從私有函數中訪問選項

Question

我正在學習使用widget-factory模式編寫jquery-ui插件。爲了組織更清潔，我在對象字面量中定義了一些幫助器方法，這些方法被傳遞給$.widget。我想訪問這些助手中的選項對象。例如在下面的樣板中，如何訪問_helper()內的選項對象？

;(function ($, window, document, undefined) { 

    $.widget("namespace.widgetName" , { 

     options: { 
      someValue: null 
     }, 

     _create: function() { 
      // initialize something.... 
     }, 

     destroy: function() { 

      $.Widget.prototype.destroy.call(this); 
     }, 

     _helper: function() { 
      // I want to access options here. 
      // "this" points to the dom element, 
      // not this object literal, therefore this.options wont work 
      console.log('methodB called'); 
     }, 

     _setOption: function (key, value) { 
      switch (key) { 
      case "someValue": 
       //this.options.someValue = doSomethingWith(value); 
       break; 
      default: 
       //this.options[ key ] = value; 
       break; 
      } 
      $.Widget.prototype._setOption.apply(this, arguments); 
     } 
    }); 

})(jQuery, window, document); 

謝謝。

Answer 1

所以你是你的_create內這樣做：

$(some_selector).click(this._helper) 

，你想this的_helper裏面是this上this._helper（即你的widget）。

有各種不同的解決方案：

1. 你可以使用$.proxy

   $(some_selector).click($.bind(this._helper, this)); 
   

   下劃線也有_.bind，有一個本地Function.bind如果你不擔心JavaScript版本的問題）。其他庫將有自己的函數綁定工具。你已經有了jQuery，所以$.proxy已經可用並且可移植了。

2. 你可以使用標準的var _this = this;招代理_helper自稱：

   var _this = this; 
   $(some_selector).click(function() { _this._helper() }); 
   

3. 您可以使用eventData form of click：

   $(some_selector).click({ self: this }, this._helper); 
   

   ，然後在_helper：

   _helper: function(ev) { 
       var self = ev.data.self; 
       // 'self' is the 'this' you're looking for. 
       ... 
   }