Comments on: It’s just an API

By: Sean McArthur

Sean McArthur — Tue, 09 Jun 2009 19:10:45 +0000

The way MooTools handles it, using Element#store and Element#retrieve, those functions were defined in a closure, with an object called storage. All Elements are given a UID when returned from $ or $$, and that UID is used as a key for the storage object. So they essentially use what you suggested to Ben for you.

By: Pete

Pete — Tue, 09 Jun 2009 15:35:25 +0000

The way libraries are doing this is pretty solid: e.g The custom attribute in jquery is ‘jQuery’ + timestamp with an integer value attached.

That’s certainly safer in memory management terms than attaching a indefinite ammount of objects and functions to elements. And unique enough to be considered unobtrusive imo.

I think you’re right though that storing data on elements can usually be avoided, and should be a second choice.

By: Ben Nadel

Ben Nadel — Tue, 09 Jun 2009 13:48:28 +0000

@James,

Yeah, I suppose a unified solution would cut down on a need for data. However, for something that controls elements in which the HTML itself is dynamic (ex. a paging data-grid), I think there is something quite elegant about keeping the meta-data with the record itself such that when the new HTML is injected / replaced, the old meta-data is stripped out along with it.

By: James

James — Tue, 09 Jun 2009 13:17:27 +0000

@Ryan, looks interesting; I haden’t heard of those HTML5 data attributes. One question about your usage of it: I’m not quite sure why the method is being stored as a string and then eval’d. Why can’t it just be stored as an *actual* method so that it can be called like any other method? Maybe I’m missing the point…

@Dan & @Ben, So it seems that data() is mostly used to create “linkers” between different abstractions; notably between jQuery plugins and the code that makes use of them (or, other jQuery plugins). A unified abstraction would not require these linkers.

@Ben, is it not possible for you to have that extra information for each table row existing somewhere else, like in a JavaScript object/array (one with a structure similar to the table?). Also, I don’t see how using data() cuts down on the amount of functions/methods required? Even with my example, the anonymous forEach function is only being created once; a new closure is created every time it runs.

Thanks for the comments, I really appreciate the insight! 🙂

By: Ben Nadel

Ben Nadel — Tue, 09 Jun 2009 12:36:38 +0000

Not that this is something that I truly every think about, but I would think that by using the data() method, it allows us to create one set of functions for the entire set of target elements, rather than a single closure for each element in the target set. Data(), essentially, allows us to be slightly more memory sensitive as it cuts down on the number of methods that are defined.

I agree also with where Dan is coming from. I am working on some data-table stuff right now that uses plugins and I am using the data() method to bind record-specific data to each tbody element such that other plugins used in the record initialization will know how to access record-specific data.

By: Dan G. Switzer, II

Dan G. Switzer, II — Tue, 09 Jun 2009 12:11:39 +0000

Where I think the data() method is useful is when you need to associate a value with a DOM element that needs to be publicly available. For example, you’re developing two companion plug-ins that need to work with each other. In this case you need some mechanism for sharing data between the two plug-ins.

By: Ryan Townsend

Ryan Townsend — Tue, 09 Jun 2009 12:06:07 +0000

I’m not sure if jQuery’s data() method uses this, but HTML5 has ‘data’ attributes, which are attributes named anything prefixed with ‘data-‘ and can be used at the developer’s whim.

Typical use of them is data-remote=true for specifying AJAX usage, and data-method for hyperlinks that should run a command onclick instead of visiting their usual URL, thus promoting unobtrusive JavaScript.

I use this in my Prototype-based web apps (Rails 3 will include this functionality as standard):

  Event.observe(window, 'dom:loaded', function() {
    $$('a[data-method], button[data-method]').each(function(el) {
      el.observe('click', run_data_method)
    })
    $$('form[data-remote]').each(function(el) {
      el.observe('submit', submit_via_ajax)
    })
  })
 
  var run_data_method = function(event) {
    // stop the event from running
    Event.stop(event)
    // get our event element
    el = event.element()
    // run our method
    eval(el.getAttribute('data-method'))
  }
 
  /* ... */