javascriptjqueryjquery-uiwidgetjquery-ui-widget-factory

How to store a internal property in jquery-ui widget?


I am programming a new jquery-ui widget from scratch. I found the official 'how widget factory works' document. (http://jqueryui.com/demos/widget/)

The widget itself works fine. Now I want to store some values internally - is there a preferred way to do this?
All properties that are declared in options are public I think.

Thanks for your help!


Solution

  • Just use plain old properties on this. For example, a basic widget will look something like this:

    $.widget('some_name', {
        options: { /* ... */ },
        _create: function() {
            // ...
            this.internal_value = 11;
            // ...
        },
        frobnicate_by: function(this_much) {
            this.internal_value += this_much;
        }
        // ...
    });
    

    And you can set up your internal values as properties of this as desired. For example, the above sets this.internal_value to an initial value of 11 and $(s).some_name('frobnicate_by', 23) would change the internal_value.

    You can see an example of an internal property in the example widget you linked to by looking for this.changer.

    The options are used for things that can be configured when someone creates an instance of your widget. Internal settings don't need any special handling, they're just plain old object properties; one of the nice things about the widget factory is that it makes it easy to do normal OO things in your widgets.