Javascript 回调方法中的jQuery小部件工厂访问选项

我正在尝试使用小部件工厂创建一个

jQuery

控件。我的想法是将一个按钮转换为jQuery按钮，给它一个图标，并为该按钮注册

单击

事件，以便在调用时，它在

文本框

上显示日历控件，其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

未定义；这是有意义的，因为该方法具有不同的范围。因此，我试图看看是否有一种方法可以定义一个“静态”变量，然后可以在回调方法中访问该变量。我发现这解释了如何在包装函数中创建变量，如下所示：

(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);

$.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');
        }
    }
});

---

但它仍然报告

$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);

$.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

回调，而是创建一个委托，指向我的私有

\u clickHandler

函数，该函数本身与

$.widget（）

方法在相同的上下文中运行（因为

$.proxy的第二个参数是this.\u clickHandler，this）

返回

$.widget（）

的上下文），因此方法中的

选项

变量可用