JQuery and prototype namespace

Question

Hello i just starting to get into JQuery plugins, but i am having some problems understanding the namespace.

Given the example below, when i enter the "submit" function, how do i get prototype instance inside the submit function? like the "var self = this;" in the other function? this in that method refers to the form element.

(function ($, window, document, undefined) {
    var PluginPrototype = {
        init: function (options, element) {
            var self = this;

            $(element).find('form').submit(self.submit);
            self.otherMethod();
        },

        submit: function(){
            var self = this; // the form element
        },

        otherMethod: function () {
            var self = this; // the prototype
        },
    }

    $.fn.pluginname = function (options) {
        return this.each(function () {
            var plugin = Object.create(PluginPrototype);
            plugin.init(options, this);

            $.data(this, 'pluginname', comment);
            // Get it by 
            // $.data($(select)[0], 'comment');
        });
    };

    $.fn.pluginname.Settings = {

    };
}(jQuery, window, document));

What 'instance' are you talking about?

Ohgodwhy
– Ohgodwhy

2013-05-13 17:35:56 +00:00
Commented May 13, 2013 at 17:35 — Ohgodwhy
– Ohgodwhy, Commented May 13, 2013 at 17:35

sixFingers · Accepted Answer · 2013-05-13 17:50:57Z

2

Actually, there are some misunderstood concepts here:

There's no "prototype instance" in your case. Prototype is a property of functions when they are used as constructors. In your case, PluginPrototype is just a plain object, its prototype would be Object.prototype.
"this" is a keword containing current function execution context and can be modified depending on how you call the given function.
I suggest reading a bit about jQuery plugin development here: http://learn.jquery.com/plugins/

That said, I can suggest a typical approach:

Have all methods of your plugin as properties of a "methods" object (your current PluginPrototype)

Implement logic inside $.fn.pluginName function to handle different execution requests.

return this.each(function() {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(parameters, 1));
    } else if ( typeof method === "object" || ! method ) {
        return methods.init.apply(this, parameters);
    } else {
        $.error("Method "+method+"does not exist on my wonderful plugin");
    }
});

a. Plugin initialization is called via $("…").plugin({option: value, …});

b. Plugin methods get called via $("…").plugin("method name", argument1, argument2, …);

All methods will be called with "this" pointing to current jQuery-wrapped dom element; so, to call a method from inside another method you will go with:
```
methods.methodName.call(this, argument1, argument2);
```

Hope this helps you.

answered May 13, 2013 at 17:50

sixFingers

1,2958 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Schultheiss Over a year ago

Pretty decently formulated answer "this" one!

sixFingers Over a year ago

Eheh yes my english is terrible. Also i'm kinda new to answering questions.. hope i'll get better ;)

Mark Schultheiss Over a year ago

I would have simply changed to remove the "Hope this helps you." as superfluous text.

sixFingers Over a year ago

I won't go back on this one, but sure I won't be hoping again next time :D thanks for your advice!

Collectives™ on Stack Overflow

JQuery and prototype namespace

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest