Access dialog in callback method with proxy

Question

I am currently creating a dialog within a user-define class:

$("<div>").dialog(buttons: {
   'one': function () {
      $(this).dialog('close').dialog('destroy');
   }
});

The above works fine, however, this no longer refers to the class instance in the above function. I can get around this with $.proxy :

...buttons: {
   'one': $.proxy(function () {
      this.doWork();
   }, this)

Then, I can call class methods when the dialog button is clicked.

However, I still need to call .dialog('close').dialog('destroy') on the dialog element itself. After redefining this with $.proxy , how can I access that element in the button callback? e.target refers to the button itself.

I also realize I can do something like this:

var obj = this;
...buttons: {
   obj.doWork();

but I'm looking for a way around that.

Answer 1

I'm not sure why you want to avoid var obj = this; inside the class's scope, but the only other way would be with a self-invoking closure which does essentially the same thing. In order to have a reference to both contexts, you need to store the class reference in a different variable.

With closure:

function MyClass() {
    this.createDialog = function () {
        $("<div>").dialog({
            buttons: {
                "one": function (self) {
                    return  function (e) {
                        self.doWork();
                        $(this).dialog("close").dialog("destroy");
                    };
                }(this)
            }
        });
    };

    this.doWork = function () {
        // do work
    };
}

$(function () {
    var obj = new MyClass();

    $(".createDialog").click(function () {
        obj.createDialog();
    });
});

jsFiddle: http://jsfiddle.net/ar4ZL/