Question

我正在尝试使用小部件工厂创建jQuery控件。我的想法是，我将一个按钮变成一个jQuery按钮，给它一个图标，并为该按钮注册click事件，这样当调用它时，它会在textbox上显示一个日历控件，其id作为widget方法的选项传入：

$.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函数的委托，该函数本身运行在与$.widget()相同的上下文中方法（因为$.proxy(this._clickHandler, this)的第二个参数返回$.widget()的上下文）因此在方法中可用options变量。

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

1 个答案: