JQuery UI Widget Inheritance / class method call

Question

I'm trying to write a custom widget in JQuery UI (v 1.9 m8): http://pastebin.com/zua4HgjR From my site I call it like this: var D = new $.ui.mail({}); Basically it works.

Is there a better method to call doSend on button click?

The question is how to access object instance from function handler? "this" returns entire html window. Tried with $.proxy doesn't work: click: $.proxy(this.doSend, this);

Thanks in advice!

Answer 1

Spending this weekend finally I finished my plugin: http://agrimarket-blacksea.com/jsc/jquery-mail.js

I decided to call "class function" in classical way: $(this).mail('doSend'), until I'll find something better.

Thanks!

Answer 2

Unfortunately if you setup the buttons by using the options member you'll have no reference to the element that you need in order to call doSend. One workaround I was able to come up with is to assign the handler in the _create method where you have the appropriate reference.

_create: function() {
    this.options.buttons = [
        {
            text: 'Send',
            click: function(self) {
                return function() {
                    $(self.element).mail('doSend');
                };
            }(this)
        },
        {
            text: 'Cancel',
            click: function() { $(this).remove() }
        }
    ];                     
    this._super(arguments);
}

Live Example - http://jsfiddle.net/hhscm/2/