回调方法中的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变量可用。