Question

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

当我的自定义窗口小部件中的窗口小部件调用自定义窗口小部件中的函数时，我得到的问题是 this。引用。例如：

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

问题是do_it函数中的 this 没有指向my_custom小部件，而是指向按钮小部件。

上面是象征性的，请不要指出一个错误，因为我的实际小部件超过3000行代码并且有许多这样的引用。当其他小部件调用我的小部件函数时，我需要将my_widget实例放在像这样的函数中。

我已尝试输入另一个参数，但在某些第三方小部件中有一些回调，这是不可能的。

必须有一种简单的方法来为my_widget获取正确的此值。

jsFiddle供参考：http://jsfiddle.net/jplevene/6e7m2q6h/3/

Answer 1

您可以使用bind()代替click()，指定＆＃34;上下文＆＃34;，或者只引用一个局部变量并调用该函数（例如下面的self ）：

$.widget("custom.my_widget",
{
    // the constructor
    _create: function() {
        var self = this;
        this.variable = "HI";

        // A Custom widget
        this.button = $("<button>").button().click(function(){
            self.do_it();
        });
    },

    do_it: function(e) {
        alert(this.variable);
    }

JSFiddle： http://jsfiddle.net/ewpgv3mt/1/

Answer 2

我发现这样做的唯一方法如下：

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

我所做的是通过＆＃34;这个＆＃34;值为对象的数据值。必须有比这更好的方法。

我试过$（this）.closest（＆＃34; .my_widget_class＆＃34;），但我需要来自对象的小部件

这个引用在jQuery UI Custom小部件中

2 个答案: