Html5 and data-* attributes?

Question

With all the respect to Html5 data attribute

When I have a code like this:

 <li class="user" data-name="Royi Namir" data-city="Boston" data-lang="js" data-food="Bacon"> </li>

I'm adding quite a lot of redundant chars into the document.

I only need this type of data-XXX in order to do :

myDomElement.dataset[xxx];

However , I could easily do this

<li class="user" dn="Royi Namir" dc="Boston" dl="js" df="Bacon"> </li>

Without those extra data- prefixes (and save me a lot of extra chars). and to read it via "start with " selector like [d^] – jQuery API

Am I missing something here ?

Answer 1

You could use this :

<li class="user" data-user='{"name":"Royi Namir", "city":"Boston", "lang":"js", "food":"Bacon"}'> </li>

And then

var user = JSON.parse(element.dataset.user);

Using jQuery, it's even simpler :

var user = $(element).data('user');

And if you want to get all your users :

var ​users = $('[data-user]').map(function(){return $(this).data('user')});

There would be less redunduncy and a directly usable structure, especially with deeper properties. Data attributes aren't only for strings.

But the main point about data- attributes is to normalize a practice. Now it's clear when looking at the HTML, what attributes are standard HTML (view) attributes and what attributes are data ones (specific to your application logic).

Answer 2

An alternative I sometimes use is to shape the data-* string like a querystring, e.g.

<li class="user" data-cn="dn=Royi Namir&dc=Boston&dl=js&df=Bacon">

And convert that to an object using:

function getData(id,el){
    var data = el.getAttribute('data-'+id).split('&'), ret = {};
    data.map(
        function(a){
            var curr = a.split('=');
            this[curr[0]] = curr[1];
            return a;
        }, ret
    );
    return ret;
}

It is less error prone (no worries about apostrophes etc.) and better readable imho.

jsFiddle

Answer 3

If you are adding quite a lot redundant chars, you may want to refactor your application in a client-side MVC flavour - basically passing data as JSON, and handle it via templating.

data-* attributes are cool and they let you inject stuff in the DOM while keeping your document standard compliant, but if you rely on using the DOM itself as the data layer of your application, I strongly advise you to go with the aforementioned solution.