0

Which is best practice for passing data from a DOM element to the attached event:

var input = '<input type="text" class="myplugin-input">';
this.$el.append(input);

var inputEl = this.$el.find('.myplugin-input'),
    inputData = {
        pluginObj   : this,
        someData    : 'xyz',
        otherData   : 50            
    };

//* Option 1 - is this best practice?
inputEl.on('keyup', inputData, this.inputHandler);

//* Option 2 - is this best practice?
$.data(inputEl, 'myPluginInputKey', inputData);
4
  • What you are trying to achieve isin't clear and cannot be answered with more contextual info. What's the purpose of the plugin and why does it need to communicate this data?
    – plalx
    Oct 17, 2014 at 1:42
  • @plalx It's more of general question. However, jfriend00 answered the original intent of the question below, i.e. use option 1 when only needing data for the bound function and use option 2 when needing the data in a global purpose (that is accessible within the element itself for other functions).
    – TonyaGM
    Oct 17, 2014 at 1:48
  • Yes, jfriend00 answer gives the general guidelines. In addition, I wouldn't expose data as a simple data structure, but craft a well-tought public API on which clients can rely.
    – plalx
    Oct 17, 2014 at 1:58
  • I completely agree. And we will. This question was more for general knowledge of when to use one versus the other. The API will handle each case specific to the plugin's needs. Thank you.
    – TonyaGM
    Oct 17, 2014 at 2:04

2 Answers 2

0

If the data is only needed within the event handler, then I'd go with Option 1 to keep the data stored only for the consumer of the data. If you may want access to the data from elsewhere in your program, then use .data() to store it for anyone to access.

FYI, an alternate form of option #2 is a little more readable and more consistent with how most jQuery operations read:

inputEL.data('myPluginInputKey', inputData);
1
  • Perfect. That's really the intent of my question, i.e. when to use either one approach.
    – TonyaGM
    Oct 17, 2014 at 1:49
0

You can have jQuery manually associate data with your DOM element, or you have to.

If you're creating a plugin, attach the input element to your plugins' instance:

I'm not sure the context of your example code, but something along the lines of:

this.pluginInput = {
   elem: this.$el.find('.myplugin-input'),
   data: {
      someData    : 'xyz',
      otherData   : 50
   } 
}

Keeping track of the data associated with each of your elements using jQuery data is difficult to maintain. Creating a reference to your plugin from the elements data is also a little strange. You would really only want to do this if you needed to gather the plugins instance from the DOM.

Gathering this data from an event is simple, if you bind the event in your plugins constructor (or whatever method you attach to initialize the events)

Plugin.prototype.init = function () {

   var _this = this;

   this.pluginInput.elem.on('keyup', function () {
      // use _this.pluginInput.data
   });

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.