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.

Advertisements