Question

I am wondering how to share data between methods in a jQuery extension, so when I call the refresh method, it is able to use the plugin and options variables defined in init.

There is more than one of these controls per page.

Here is an example of what I have:

(function($) {
    var methods = {
        init: function(options) {
            var defaults = {
                defaultText: "Rating",
                maxRating: 5,
            };

            options = $.extend(defaults, options);

            return this.each(function() {
                var plugin = $(this);

                main($(plugin), options);
            });
        },

        refresh: function() {
            // I would like to be able to use the 'options' and 'plugin' variables defined in the init method
        }
    };

    function main(plugin, option) {
        // do main code stuff
    }
}(jQuery));

Answer 1

Store the data on the element itself, then access it per element.

(function ($) {

var methods = { // should probably expose this object in some way so it can be extended by other develoeprs or so that defaults can be changed

    defaults : {
        defaultText: "Rating",
        maxRating: 5,
    },

    init : function (options) {

        options = $.extend({}, methods.defaults, options);

        this.data("myPlugin", options);

        return this.each(function () {

            main($(this), options);

        });
    },

    refresh : function () {

        return this.each(function(){

            var options = $(this).data("myPlugin");

        });
                // I would like to be able to use the 'options' and 'plugin' variables defined in the init method
    }
};

function main(plugin, option) {

    // do main code stuff

}

})(jQuery);

I’m not sure why you would want access to the plugin var, you should already have access to the element that the refresh method is called on.