What is a reverse reference to the DOM object?

Question

In this link: http://css-tricks.com/snippets/jquery/jquery-plugin-template/ it has a line of code that says

// Add a reverse reference to the DOM object
base.$el.data("yourPluginName", base);

what does the "reverse reference to the DOM object" mean?

Answer 1

Assuming that you know the jQuery data function:

It's storing a reference to the instance of the class in the data cache of jQuery, meaning that the stored instance can be used to access the initial base object if it in the current context is not available.

This way, the class instance can be used later. However, the use of the prototype keyword upon the initial class that the instance were created from will modify the instance.

---

EDIT:

Ooops, it seems that Anurag is right, and I was giving wrong information.
Sorry, the information I gave in initial answer was not completely correct. I've updated the answer, so it now tells the truth.
In the comments you're asking:

so you mean its storing the current state of "base" in the data cache but if we make changes to "base" later on then the one in the data wont be affected? so if for some reason we needed to get the original one again we can do data('yourPluginName') to retrieve it? can you give me an example of when this would be helpful?

It seems that none of the statements are correct.

As I did obviously not remember adequately, the thing stored in data is only a reference to the object:

var someString = "", obj = {};
obj.hello = "Hello";
$("#someElement").data("object", obj);
obj.world = " world.";
alert(
  obj.name + 
  $("#someElement").data("object").world
); // alerts "Hello world."

BTW, JavaScript variables with names like this base-thing (but, more often seen as that or similar) are typically used to represent the current context, accessed through the this keyword, which on many occasions is more easy to store in another variable due to scoping/context changes, that will make the current context and therefore this, change.

Also due to issues with context, the stored value in data could be used to access the specific object instance from another context (that is, when this represents something else), instead of the version of the base object that was continually used after a copy of it was stored.

I hope this answered you questions :D

Answer 2

The technique and the problem it solves is general and not specific to jQuery plugins. There may be cases where a Javascript object corresponds to a DOM element, and wraps logic specific to that DOM element. This object might be interested in listening to events such as clicks that happen within that DOM element. The information we get in those callbacks is the element that triggered it, and not the associated object. You could use jQuery's data API or any type of map in general to retrieve the corresponding object, and do something with it.