jQuery Widget Параметры доступа к фабрике в методе обратного вызова

Question

Я пытаюсь создать элемент управления jQuery с использованием фабрики виджета. Идея состоит в том, что я включаю кнопку в кнопку jQuery, даю ей значок и регистрирую событие click для этой кнопки, чтобы при вызове он отображал элемент управления календаря на textbox, идентификатор которого передается как опция для виджет метод:

$.widget("calendarButton", { 
    options: { 
     textFieldId: '' 
    }, 
    _create: function() { 
     this.element.button(
    { 
     icons: { 
      primary: "ui-icon-calendar" 
     } 
    }).click(function() { 
     if (this.options.textFieldId != '') { 
      $(this.options.textFieldId).datetimepicker('show'); 
      return false; 
     } 
    }); 
    } 
}); 

проблема с этим, однако, является то, что this.options не определен, когда обработчик щелчка вызывается; что имеет смысл, поскольку метод имеет разный объем. Поэтому я попытался выяснить, существует ли способ определить «статическую» переменную, доступ к которой можно получить в методе обратного вызова. Я обнаружил, что this answer объясняется, как создавать переменные внутри функции-оболочки, как это:

(function ($) { 

    var $options = this.options; 

    $.widget("calendarButton", { 
     options: { 
      textFieldId: '' 
     }, 
     _create: function() { 
      this.element.button(
     { 
      icons: { 
       primary: "ui-icon-calendar" 
      } 
     }).click(function() { 
      if ($options.textFieldId != '') { 
       $($options.textFieldId).datetimepicker('show'); 
       return false; 
      } 
     }); 
     } 
    }); 
})(jQuery); 

Но он по-прежнему сообщает, что $options не определено. Есть ли способ достичь этого? Я пытаюсь избежать использования функции обратного вызова, поскольку она будет почти одинаковой для всех экземпляров. Любая помощь приветствуется.

Answer 1

После игры с ним в течение нескольких часов я наконец натолкнулся на метод jQuery Proxy, который именно то, что я искал. Я изменил код немного, чтобы выглядеть следующим образом:

$.widget("calendarButton", { 
    options: { 
     textFieldId: '' 
    }, 
    _create: function() { 
     this.element.button(
     { 
      icons: { 
       primary: "ui-icon-calendar" 
      } 
     }).on("click", $.proxy(this._clickHandler, this)); 
    }, 
    _clickHandler: function() { 
     if (this.options.textFieldId != '') { 
      $(this.options.textFieldId).datetimepicker('show'); 
     } 
    } 
}); 

Обратите внимание, что вместо реализации click обратного вызова непосредственно, я по существу создания делегата, который указывает на мою личную _clickHandler функцию, которая сама по себе работает на том же context как метод $.widget() (так как второй аргумент $.proxy(this._clickHandler, this) возвращает $.widget() контекст), следовательно, доступность переменной options внутри метода.