jQuery Widget Factory回调方法中的访问选项

我正在尝试使用小部件工厂创建一个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; } }); } }); 

但问题是，在调用click处理程序时， 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'); } } }); 

请注意，我实际上是在创建一个指向我的私有_clickHandler函数的委托，而不是直接实现click回调，它本身运行在与$.proxy(this._clickHandler, this) $.widget()方法相同的上下文中（因为$.proxy(this._clickHandler, this)的第二个参数） $.proxy(this._clickHandler, this)返回$.widget() $.proxy(this._clickHandler, this) $.widget()的上下文）因此可以在方法中使用options变量。