Question

I asked a previous question and I feel I wasn’t succinct enough. So , here is my code example and my accessing of a global. I feel this is bad form, but I can’t find another way to do this given my plugin format.

I believe I could apply my functions to a method var and then instantiate that via the plugin in call, but so far – my plugin isn’t set up like that and think that might be more work. But I’d like to hear from more experienced jQuery plugin creators.

Usage:
Data is front loaded. As dynamic content is created. I gobbled up some pertinent information pertaining to it, bundle it up, send an ajax call – then update the view. The thing is. My plugin could be called numerous times on a page. But the thing is I need to grab some data objects PRIOR to calling my plugin so I then can operate on them and determine “what I need to update”. So that is my issue. I need to get some data outside of the plugin. THEN i need to pass it in. Is this considered “appropriate”.

My hope was I could funnel the data into a method of the plugin and then when I call it I have the data to make some display choices.

if ( typeof Object.create !== 'function' ) {
Object.create = function( obj ) {
    function F() {};
    F.prototype = obj;
    return new F();
};
}
// this is the global that I push each reiteration of data into.
var perLineDataArray = [];
(function( $, window, document, undefined ) {
var Sustainability = {
    _init: function( options, elem ) {
        var self = this;
        self.elem = elem;
        self.$elem = $( elem );
        /* plugin call has all the data I need, I pass it in here */
        self.perLineData = groupedperLineData;
        self.url = 'path_to_url/sustainability';
        self.options = $.extend( {}, $.fn.querysustainability.options, options );
        self._extractUrlData();
        self._cleanup();

    },
            _extractUrlData: function(){
               // this is where I would go thru each of the data objects and 
               // determine WHAT in the view needs updating based on some critera.
            },
    _getsustain: function()
            {
              var self = this;
              $.ajax({
                       // my ajax call data
                            success: function(data){
                                this._buildUpdate(data);
                            }
                  });
            },
    _buildDispaly: function( results ) {
        var self = this;
        self.sustainability = $.map( results, function( obj, i) {
            return $( self.options.wrapDisplay ).append ( obj.text )[0];
        });
    },
            _cleanup: function(){
               // clean out global array for next funneling of grouped up data
               perLineDataArray = [];
            },
    _showMessage: function() {
        var self = this;
        self.$elem[ self.options.transition ]( 500, function() {
             $(this).html( self.sustainability )[ self.options.transition ]( 500 );
        });

    },
};
$.fn.querysustainability = function( options, method ) {
    return this.each(function() {
        var sustainability = Object.create( sustainability );
        sustainability._init( options, this );
        $.data( this, 'querysustainability', sustainability );
    });
};

$.fn.querysustainability.options = {
    display: '<span></span>',
    usedClass : 'uniqueclass',
    transition: 'fadeToggle'
};


 })( jQuery, window, document );

I haven’t worked out all the code yet, but that is the jist.. so here is how i would push the data into the global.

 //Some reiteration of building of HTML dom element displays.
 perLineDataArray.push(some_per_iteration_obj);

Then, when the display is build and I have all the objects I need – THEN I call the plugin.

    jQuery('#planets').querysustainability({
        groupedperLineData: perLineDataArray
     });

Or I could add the global here:

    $.fn.querysustainability.options = {
    display: '<span></span>',
    usedClass : 'uniqueclass',
    transition: 'fadeToggle',
    groupedperLineData: perLineDataArray
};

My gut is telling me I want the plugin to encapsulate everything but then another part of me feels I need to pass in what I need to operate on and now have my plugin retrieve it.

So, is there a way to call a sub-method of the plugin, store up the data set and then when I call the plugin, it has that data ready or ?

your thoughts? And if how do you feel I should solve this, code wise?

Answer 1

OK, as aforementioned in comments, the following is my most basic of jQuery plugin layout templates. From it you can design pretty much any jQuery plugin you want and have a ton of versatility. It’s pretty self explanatory. Just look it over and if it helps, great, if not let me know and I’ll remove it as an answer.

/*  Example Plug-in Setup   */
(function($) {
    if (!$.myExample) { // your plugin namespace
        $.extend({
            myExample: function(elm, command, args) {
                return elm.each(function(index){
                    // do work to each element as its passed through
                    // be sure to use something like
                    //      return elm.each(function(e) { dor work });
                    // as your final statement in order to maintain "chainability"
                });
            }
        });
        $.fn.extend({
            myExample: function(command) {
                return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1));
            }
        });
        $.myExample.props = {
            key1: "value",
            key2: "value"
        };
        $.myExample.methods = {
            key1: function(param) {

            },
            key2: function(param) {

            }
        };
        $.myExample.init = function(param) {
            var key = "value",
                key2 = {
                    subKey: "value"
                };
                /*
                /  run any number of initializing functions here
                /  I prefer to make my param a value that can be a
                /   string with a possible object
                /    the string for holding a base configuration
                /    the object for any change in properties or base values for that config
                */
        };
        $.myExample.defaults = {
            key1: "value",
            key2: {
                prop1: {
                    subKey1: "value",
                    subKey2: "value"
                },
                prop2: {
                    subKey1: "value"
                }
            },
            key3: function(param) {

            }
        };
    }
})(jQuery);