Jquery ui 此引用位于jQueryUI自定义小部件中

我构建了一个自定义小部件，其中包含许多其他小部件

我遇到的问题是，当自定义小部件中的小部件调用自定义小部件中的函数时，这个。引用。例如：

$(function() {
    $.widget("custom.my_widget",
    {
        _create: function() {
            this.variable = "HI";
            var that=this;
            // A Custom widget
            this.button = $("<button>", {html:"PRESS"})
            .button()
            .click(this.do_it) // I know I can do a function(){ that.do_it() }) but that is not the point
            .appendTo(this.element);
        },

        do_it: function() {
            // With the setup like this, how do I get the correct this. reference 
            // As it stands, this = the button object
            alert("TEST: "+ this.variable);
        }
   })
});

$（函数（）{
$.widget（“custom.my_uu小部件”，
{
_创建：函数（）{
this.variable=“HI”；
var=这个；
//自定义小部件
this.button=$（“”，{html:“按”}）
.按钮（）
.click（this.do_it）//我知道我可以做一个函数（）{that.do_it（）}），但这不是重点
.appendTo（此元素）；
},
do_it:函数（）{
//使用这样的设置，如何获得正确的this.reference
//目前，这=按钮对象
警报（“测试：+此.变量”）；
}
})
});

问题是do_it函数中的this没有指向my_自定义小部件，而是指向button小部件

以上是象征性的，请不要指出一个错误，因为我的实际小部件有3000多行代码，并且有很多类似这样的引用。当其他小部件调用我的小部件的函数时，我需要在这样的函数中获取my_小部件实例

我试着输入另一个参数，但在一些第三方小部件中使用一些回调，这是不可能的

必须有一种简单的方法来获取my_小部件的正确基值

---

jsIDLE供参考：

您可以使用

bind（）

，而不是

click（）

，指定“上下文”，或者只引用局部变量并调用函数（例如下面的

self

）：

$.widget（“自定义.my\u widget”，
{
//构造器
_创建：函数（）{
var self=这个；
this.variable=“HI”；
//自定义小部件
this.button=$（“”）。button（）。单击（函数（）{
自我介绍；
});
},
do_it:功能（e）{
警报（this.variable）；
}

---

jsiddle:

我找到的唯一方法如下：

$(function() {
    $.widget("custom.my_widget",
    {
        _create: function() {
            this.variable = "HI";
            // A Custom widget
            this.button = $("<button>", {html:"PRESS"})
            .button()
            .click(this.do_it) // I know I can do a function(){ that.do_it() }) but that is not the point
            .data("widget", this)  // <---- New line here
            .appendTo(this.element);
        },

        do_it: function() {
            // Get the parent widget
            var that = $(this).data("widget");
            alert("TEST: "+ that.variable);
        }
   })
});

$（函数（）{
$.widget（“自定义.my_widget”，
{
_创建：函数（）{
this.variable=“HI”；
//自定义小部件
this.button=$（“”，{html:“按”}）
.按钮（）
.click（this.do_it）//我知道我可以做一个函数（）{that.do_it（）}），但这不是重点
.data（“widget”，this）//这没有用，我说它是符号的。您的仍然返回未定义的.variable。@Justin Levene:模拟了一个JSFIDLE，显示此代码确实发出“HI”警报正如预期的那样。@Justin Levene:谢谢。您的JSFIDLE中的注释暗示您不想使用解决此常见Javascript问题的常规方法。不确定您为什么认为有神奇的插件解决方案，因为这只是一个基本的Javascript函数/上下文范围问题。请澄清为什么此问题的常规解决方案是效率？当设置“formatter”时，普通解决方案不如jqGrid这样的第三方小部件（未显示在小提琴上）使用fiddle中显示的方法。最好显示一个特定的格式化程序代码示例，包括一个第三方小部件，因为我一直在自己的插件中使用第三方小部件，并且没有任何问题。这与大多数插件在幕后所做的类似（仅在主要元素上）但是你仍然没有在代码中解释你的评论：为什么你不想使用匿名函数（例如，
function（）{that.do_it（）}）
）。为什么这“不是重点”？：）
$(function() {
    $.widget("custom.my_widget",
    {
        _create: function() {
            this.variable = "HI";
            // A Custom widget
            this.button = $("<button>", {html:"PRESS"})
            .button()
            .click(this.do_it) // I know I can do a function(){ that.do_it() }) but that is not the point
            .data("widget", this)  // <---- New line here
            .appendTo(this.element);
        },

        do_it: function() {
            // Get the parent widget
            var that = $(this).data("widget");
            alert("TEST: "+ that.variable);
        }
   })
});