jQuery: UI widget definition

Question

I have a widget defined like so:

$.widget("ui.mywidget", {
    _init: function() {
        this.element.bind("keyup", function(event) {
            alert(this.options);
            alert(this.options.timeout);
        });
    }
});

And trying to call it like so:

$("input.mywidget").mywidget({timeout: 5});

I also redefined the bind method using the this.element.keyup(function(event) { ... }) style: no difference.

But, in the keyup bind, this.options (and referencing it just as options) both yield undefined. I thought the UI widget framework allowed this type of abstraction; am I doing something wrong?

Answer 1

When inside bind(), this changes to refer to the object that the event is raised on. Try:

$.widget("ui.mywidget", {
    _init: function(options) {
        var opts = this.options;
        this.element.bind("keyup", function(event) {
            alert(opts);
            alert(opts.timeout);
        });
    }
});

Answer 2

What @Dave said is right. You can also set "this" to a variable rather than using options as an argument to the init function. Here is how I see it implemented often:

$.widget("ui.mywidget", {
    options: {
        timeout: 100
    },
    _init: function() {
        var self = this;
        self.element.bind("keyup", function(event) {
            alert(self.options);
            alert(self.options.timeout);
        });
    }
});

Answer 3

Why stop there? Check out $.proxy and write better code

$.widget("ui.mywidget", {
    _create: function() {

        //Under this syntax, _omgAlertsRule must be a method of 'this'
        this.element.bind("keyup", $.proxy( this, '_omgAlertsRule' ) );
    },
    _omgAlertsRule: function( event ){

        alert(this.options);
        alert(this.options.timeout);
    }
});