jquery plugin how to maintain state of object

Question

I am trying to create a simple plugin , and I've faced with problem on how plugin's state should be managed.

(function ($) {
// Static things for plugin goes here
var uiHtml = "<div class='gaw-box'>" +
      "</div>";



var methods = {


    init: function (options) {

        return this.each(function () {
            // Create UI
            $(this).html(uiHtml);

            if (options) {

                var defaults = {
                    name:"N/A"
                };

                var opt = $.extend(defaults, options);
                  $(this).find(".gaw-name").html(opt.name);
            }

            // Visual Events attach
            var uiobj = $(this).find(".gaw-box");
            $(uiobj).mouseenter(function () {
                if (!this.isSelected) {
                    $(this).css('border', '1px solid red');
                }
            });

            $(uiobj).mouseleave(function () {
                if (!this.isSelected) {
                    $(this).css('border', '1px solid black');
                }
            });

            $(uiobj).click(function () {
                this.isSelected = !this.isSelected;
                if (this.isSelected) {
                    $(this).css('border', '3px solid red');
                }
                else {
                    $(this).css('border', '1px solid black');
                }

            });

            });

    },
    getIsSelected: function (options) {

        return this.isSelected; // ALWAYS FALSE
    },
    destroy: function () { }
};

$.fn.gateaway = function (method) {
    var plugin = this;

    plugin.isSelected = false;

    if (methods[method])
    {
        return methods[method].apply(plugin, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(plugin, arguments);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.pluginName');
    }
};
})(jQuery);

What I am trying to achieve is to save state of the plugin (object) , if it's selected for example or not. I am calling my plugin like

$("#gate").gateaway('getIsSelected')

the result is always , false ... I know that the problem is with "this" scope , the problem that this is first time I am developing on client , and the second i need to finish it today :-) , so if it's possible to point me where or how can i organise the plugin to be able save state of each plugin it will save me :-)

Answer 1

The official jQuery advice is to use the jQuery UI Widget Factory as it gives you lots of nice options for storing state (and other stuff too), but it's not that hard to store state on the jQuery element using the data function, like so:

$.fn.myplugin = function (options) {

    var create = function (el, options) {
        // Find existing state if we're running this again on same element
        var state = el.data("myplugin") || {};

        makeActualPlugin(el, state);

        state.something = "Store me for later";
        el.data("myplugin", state);
        return el;
    };

    this.each(function () {
        create($(this), options);
    });
};