回調方法中的jQuery Widget Factory訪問選項

Question

我正在嘗試使用小部件工廠創建jQuery控件。 這個想法是，我將一個按鈕變成一個jQuery按鈕，給它一個圖標，並注冊該按鈕的click事件，以便在調用該按鈕時，它在textbox上顯示一個日歷控件，其ID作為選項傳遞給小部件方法：

$.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.options是未定義的。 這是有道理的，因為該方法具有不同的范圍。 因此，我試圖查看是否存在定義“靜態”變量的方法，然后可以在回調方法中對其進行訪問。 我找到了這個答案 ，解釋了如何在這樣的包裝函數中創建變量：

(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函數的委托，該函數本身與$.proxy(this._clickHandler, this) $.widget()方法在同一上下文中運行（因為$.proxy(this._clickHandler, this)返回$.widget() $.proxy(this._clickHandler, this) $.widget()的上下文），因此該方法內部的options變量可用。