Working with W3C-specified technology is like working with products that come from companies that have no idea what their customers want. That said, I’m now working with HTML5 and I think they’ve turned that around — at least if this little HTML5 feature is any indication.
Custom Data Attributes
By now AJAX is old hat. There are a lot of tools and frameworks out there that make writing AJAX applications simpler. Unfortunately, though, HTML and JavaScript remains fairly decoupled leading to some…interesting (read: dirty!) workarounds for passing data from markup to JavaScript.
HTML5 mitigates this issue by allowing you to create custom attributes on your HTML elements. The only requirement is that the custom attribute be prepended with a ‘data-’ bit. Here’s an example:
<button data-product-id="15" class="remove-product">Remove this Product</button>
Now we don’t have to do anything silly with our JavaScript to persist domain-specific data! For example (I know you love jQuery):
$(".remove-product").live('click', function(eventObj) {
var productId = $(this).attr('data-product-id');
// Do something with that product Id...AJAX your little heart out.
});
How much cleaner can you get?! No need to pass things around all hack-y like! Now to just refactor many years of bad habits…
Edit: For those who care, here’s a link to the relevant bits of the spec: Embedding custom non-visible data.
There’s also the data function for elements in jQuery that already supports this.
James, any idea how that was implemented? I always assumed that it was somehow stuck in the jQuery object, thus the values wouldn’t be persisted across contexts — but I never tested that.
I believe it is stuck in the jQuery object and I could see you might want to be able to access element data outside of jQuery, but I think you could also find a way to do what you’re trying to do within jQuery/JS.
Of course this method has been available for awhile, but I think the point the author was trying to convey is that an application could render some model data coming from the back-end into the HTML, which could then in turn be read in by JavaScript. Using jQuery’s .data() method implies you already know the data you want to store.
@Ben
If you need to do that just build the elements you need using an AJAX request and DOM creation.
James, that seems pretty narrow minded.
The ability to create custom data attributes allows for a very clean way of passing metadata about your page elements between markup and JavaScript as well as allows you to decouple the page elements from the scripting language. Yes, some other hacky methods exist — assigning stuff to .data() in jQuery is the method you mention — but really data attributes are the cleanest method available right now.
@Bradhe
I totally agree. I’m just saying it’s been “possible” before. The only problem is until IE supports it most won’t be able to use them.
Whats to support? IE supports this just fine for me…pretty sure IE just ignores attributes it doesn’t know what to do with, so really I guess it falls to JS to be able to parse them out right?
I would suspect IE to freak out about unknown attributes, but if it doesn’t great.
Following Comments…
Excellent.