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 ?

Plow

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).

Contrabassoon

@RoyiNamir try it and let us know :) – Vitiated

Can you please explain when should I use each ? ( you only supplied a sample..)....:-) – Plow

@w0rldart oops. sorry. it is not working actually. it returs undefined. – Plow

What doesn't work ? Here's without jQuery. And here's with jQuery. – Elite

@dystroy I didnt talk about your whole solution. user.dataset[xxx] the value of this is the string json represenattion. I thought I could use it like element.dataset.user ( without using json.parse). your code is working. I just thought it could be handled without the json.parse. – Plow

You have jQuery imported, so you don't need JSON.parse. – Elite

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

Nineveh

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.

Blatt