Proper way to create an instance variable using jQuery UI Widget Factory

Question

I'm using the jQuery UI widget factory.

$.widget("myPlugin" , {

    options: {
    },

    _create: function() {
    },

    instanceVar: "huzzah!"

});

On testing, it looks as though instanceVar is actually part of the prototype. So it is the same across all instances of the plugin.

I can fix this by putting instanceVar into options, like so:

$.widget("myPlugin" , {

    options: {
        instanceVar: "huzzah!"
    },

    _create: function() {
    },

});

However that seems odd, as instanceVar is just an internal variable for use by the plugin -- not something the user of the plugin should be able to change.

Is there another (better) way to achieve this?

Thanks for your help!

You can store private data on the instance itself, for example, inside the _create, you should be able to do this.instanceVar = "huzzah!" — user400654
– user400654, Commented Dec 13, 2012 at 20:16

user400654 · Accepted Answer · 2012-12-13 20:26:03Z

17

You can store private data on the instance itself, for example, inside the _create, you should be able to do this.instanceVar = "huzzah!"

$.widget("ui.myPlugin", {

    options: {
        foo: "foo"
    },

    _create: function() {
        this.instanceVar = "huzzah!"
    },

    _setOption: function() {
        this.instanceVar = "worky!";
    },

    destroy: function() {
        console.log(this.instanceVar);  
    }

});

$(document).myPlugin().myPlugin("option","foo","bar").myPlugin("destroy"); // "worky"

$("body").myPlugin().myPlugin("destroy"); // "huzzah!

Demo: http://jsfiddle.net/PGUqr/

answered Dec 13, 2012 at 20:26

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geoff Cox Over a year ago

You can also declare a private instance variable just like you would a function by using the underscore prefix as a convention. _instanceVar: undefined,

jinglesthula Over a year ago

It should be noted that using the underscore prefix does not actually prevent access to such 'private' members and methods. You can still access them via $('#myElement').data('pluginName')._foo. What adding the underscore does is to omit that function from being available via the usual way of calling methods on the widget: $('#myElement').pluginName('somePublicFunction'). Once you have a reference to the widget instance you have full access to everything regardless of whether it has a leading underscore.

jinglesthula Over a year ago

Note also that although the option member doesn't have an underscore, the docs indicate access to its contents via the .option() method: api.jqueryui.com/jquery.widget/#method-option

Collectives™ on Stack Overflow

Proper way to create an instance variable using jQuery UI Widget Factory

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related