Nice summary, thanks. Here's some more potential food for thought:
http://ejohn.org/blog/html-5-data-attributes/
http://www.1729.com/blog/HtmlAnnotations.html
FWIW, in general I've steered away from using custom attributes and have
generally used id="name_123" (often), class with data inside (less), rel
attribute (occasionally) or the metadata plugin when I can't use
$.data(). No good reason other than bits and pieces of what you've
summarized.
Might be something of interest in here, too:
http://microformats.org/wiki/Main_Page
- Jack
Josh Powell wrote:
@all - thank you for your comments. What I've learned is 1) custom
attributes are referred to as DOM Expandos, 2) they can cause IE to go
into strict mode, 3) Developers often override the class or id of an
element to store data instead of using a DOM Expando, and 4) There is
a bug in jQuery having to do with .live() and Expandos. Are there any
other drawbacks? Anyone else think they are beneficial? I've only
heard from the naysayers so far.
@mkmanning - "You could also rethink your approach; there's really no
reason to
store the kind of data you are in the element... "
You are taking the example too literally. I was illustrating how what
I was talking about worked, not giving a case where you would use it.
nifty time saving trick here, I'll look into it, thank you:
var tds = $('td.clickme').live('click', function() {
console.log('filter'+tds.index(this));
});
@JBeckton - are you saying that using custom attributes in a selector
for .live would not execute the function assigned to be executed when
the elements were clicked on? Can you give me the url of the bug you
are talking about?
@Karl Swedburg - Right, there is a name for this. DOM Expando. Sounds
like some sort of nerdy javascript superhero.
@RobG - I really don't like the idea of overriding 'class' to hold
data, and attr has never been so slow as to need refactoring for me.
Classes are meant for presentation and it blurs the lines between
presentation and logic too much for me. It's also really non-obvious
when a class is used to hold data and when it is used to style the
element. I generally don't use custom attributes for selectors
anyway, but to hold information I'll need in the live() call. Here is
an actual example of where I might use DOM Expandos:
var media = [{
'name': 'The Three Musketeers',
'type': 'book',
'about': 'Swashbucklers'
},{
'name': 'Happy Feet',
'type': 'movie',
'about': 'Penguins'
}]; // would actually be from a returned ajax call returning json, but
here it is.
var html = '';
for (var a = 0; a < media.length; a++) {
html += '<a class="foo" name="'+ media[a].name + '" type="'+ media
[a].type + '">' + media[a].about + '</a><br>';
}
$(selector).append(html);
$('a.foo').live('click', function () {
alert('This ' + $(this).attr('type') + ' is called ' + $
(this).attr('name') + ' and is about ' + $(this).text());
});
