Question

I’m trying to create a jQuery Plugin using there name spacing system, so this is a small example of what i have

(function($){
var jScrollerMethods = {
    init:function(config){
        this.settings = $.extend({
            'option':'value'
        }, config);
    },
    getOption:function(){
        return this.settings.option;
    }
}

$.fn.jScroller = function(call){
    if ( jScrollerMethods[call] ) {
      return jScrollerMethods[call].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof call === 'object' || ! call ) {
      return jScrollerMethods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  call + ' does not exist on jQuery.jScroller' );
    } 
}

$(".selector").jScroller({'option':'newValue'});
var opt = $(".selector").jScroller("getOption");

})(jQuery);

the opt variable does not work and it should not work as when declaring functions like that the this points to the function E.G into the init:function(){.. this points to the function set to init so how do i make it so that the getOption function can access the settings but these can’t be saved to the window as there could be more than one instance of the jScroller running on differing selectors i just get seem to find or figure it out

Answer 1

You need to create a unique options object for each instance, and you need to store it with the instance. jQuery data() is great for this. This uses Crockford’s Object.create() which you may have opinions about.

if (typeof Object.create !== 'function') {
  /* 
     Function: create

     create a new instance of an object using an existing object as its prototype

     Parameters:
        o - the object serving as the new prototype

     Returns:
        a new object
  */         
  Object.create = function (o) {
     function F() {}
     F.prototype = o;
     return new F();
  };

}

Then in your init function, add something like this:

return this.each(function() {            
    var self = this,
    $this = $(this),
    data = $this.data('jScroll'),
    opts = Object.create(options);

    if (!data) {
        $this.data('jScroll', {
          options: opts, // this is the options object that you'll access later
          element: this // you may not need this
        });
    }
}); 

and your getOptions method executes this:

var data = this.data('jScroll');
if (data.options[options]) { return data.options[options] };

I do the settings merge before I call init:

} else if ( typeof call === 'object' || ! call ) {
    if (call) { $.extend(settings, call) } // this expects a settings variable defined with defaults
    return jScrollerMethods.init.apply( this, call );
}