回调方法中的jQuery Widget Factory访问选项 [英] jQuery Widget Factory access options in a callback method

问题描述

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

I'm trying to create a jQuery control using the widget factory. The idea is that I turn a button into a jQuery button, give it an icon, and register the click event for that button such that when invoked, it displays a calendar control on a textbox, whose id is passed in as an option to the widget method:

$.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是不确定的.这是有道理的，因为该方法具有不同的范围.因此，我试图查看是否存在定义静态"变量的方法，然后可以在回调方法中对其进行访问.我找到了此答案，它解释了如何在这样的包装函数内创建变量:

The problem with this however, is that this.options is undefined when the click handler is invoked; which makes sense since the method has a different scope. So I tried to see if there is a way to define a "static" variable which then can be accessed inside the callback method. I found this answer that explained how to create variables inside a wrapper function like this:

(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未定义.有没有办法做到这一点?我试图避免要求传入回调函数，因为对于所有实例而言，回调函数几乎都是相同的.感谢您的帮助.

But it still reports that $options is undefined. Is there a way to achieve this? I'm trying to avoid requiring the callback function be passed in since it'll be pretty much the same for all instances. Any help is appreciated.

推荐答案

玩了几个小时之后，我终于遇到了

After playing with it for a few hours, I finally came across the jQuery Proxy method which is exactly what I was looking for. I changed the code a little bit to look like this:

$.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变量的可用性.

Notice that instead of implementing the click callback directly, I'm essentially creating a delegate that points to my private _clickHandler function, which itself runs on the same context as the $.widget() method (since the second argument of $.proxy(this._clickHandler, this) returns $.widget()'s context) hence availablity of the options variable inside the method.

这篇关于回调方法中的jQuery Widget Factory访问选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！