CODEWITHSUNDEEP
javascriptjqueryhtmlcustom-data-attribute
Royi Namir
Royi Namir

Reputation: 148744

Html5 and data-* attributes?

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 ?

Upvotes: 6

Views: 2183

Answers (3)

KooiInc
KooiInc

Reputation: 123026

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

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382514

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

Upvotes: 13

moonwave99
moonwave99

Reputation: 22820

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.

Upvotes: 1

Related Questions