Calling a method in a jQuery extension

Question

I'm creating a jQuery plugin and wish to offer several extensions to make by solution more modular. I think I've got the correct syntax to perform the extend, but I can't seems to call any of the methods in my extension. I've only included sections of the code to try and be brief but I can provide more if needed. Any help is much appreciated!

I'm using http://jqueryboilerplate.com/ for my main plugin and this stackoverflow answer for adding my extension methods: Best Way to Extend a jQuery Plugin

Main jQuery plugin

function Plugin( element, options ) {
    this.element = element;

    // jQuery has an extend method which merges the contents of two or
    // more objects, storing the result in the first object. The first object
    // is generally empty as we don't want to alter the default options for
    // future instances of the plugin
    this.options = $.extend( {}, defaults, options );

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
}

Plugin.prototype = {

    init: function() {

        //This line does NOT work
        var id = this.showId();
        console.log(id);

        var toolbar = this.createToolbar(this.options);
        $(this.element).append(toolbar);

        if(this.options.showPalette)
        {
            var palette = this.createPalette(this.options);
            $(this.element).append(palette);
            this.fetchPalette();
        }

        var canvas = this.createCanvas(this.options);
        $(this.element).append(canvas);

    }, ....

Plugin constructor

$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
        }
    });
};

Extension method

var extensionMethods = {
    /*
     * retrieve the id of the element
     * this is some context within the existing plugin
     */
    showId: function(){
        return this.element[0].id;
    }, ....

jQuery extend

$.extend(true, $['fn']['workflowEditor'].prototype, extensionMethods);

score 0 · Accepted Answer · answered May 29 '13 at 15:43

I don't see anywhere in your code where you support calling plugin methods, whether built-in or added later as extension methods.

If the intent is to be able to call $(el).workflowEditor('mymethod', ...) in the same way as jQuery UI works then perhaps you need:

$.fn[pluginName] = function (options) {
    var ns = "plugin_" + pluginName;  // don't repeat yourself...
    if (options instanceof object) {
        return this.each(function () {
            if (!$.data(this, ns)) {
                $.data(this, ns, new Plugin( this, options ));
            }
        });
     } else {
         var args = [].slice.call(arguments, 0);  // copy args
         var method = args.shift();
         return this.each(function() {
             $['fn'][pluginName][method].apply($.data(this, ns), args);
         });
     }
};

which should call Plugin.method with the context being the retained Plugin object, and arguments being the remainder of the argument list.

If called as $(el).workflowEditor({ ... }) (i.e. with an object as parameter) then it'll associate the plugin, as before.

Thanks, with a few other bits I think I've got the bones of something working. Looking at jQuery UI helped. Basically I'm just trying to have separate parts of my plugin in different files to avoid a huge 100,000 line javascript file. — Mark, May 30 '13 at 08:38
@Mark should work, but don't forget that you can't share lexically scoped ("private") variables across code modules. — Alnitak, May 30 '13 at 08:44

Calling a method in a jQuery extension

1 Answers1