Use data- or put in Javascript?

Question

I am looking at x-editable and you have 2 choices

Option 1

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

Option 2

<a href="#" id="username">superuser</a>
    $('#username').editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
    });

I guess this leads to a question in general and not just for x-editable, where is it better to set stuff no? Is it better right in the html or is it better in the javascript.

I am sort of thinking maybe if you do it in javascript you could have some sort of constant like variable(ie if your using the module pattern) so in theory then you could use that for where ever you would need that link and if you need to chance it, you only chance it in one place where if you do the "data" way you might have to start doing find and replaces.

For Id's though maybe it is better as "data" as then you can fill that in on page load through server side variables(in my case Asp.net MVC)

I am not sure in the case if x-editable you can mix and match.

this is more of an opinion question, but you use attributes when you don't want to worry about the javascript and you want an unobtrusive experience — Logan Murphy
– Logan Murphy, Commented Apr 22, 2014 at 18:19
If the data is coming from the server, it's better set in the html returned by the server rather than in the js. you typically don't want server-code modifying javascript because at that point the minification process becomes more complicated. — user400654
– user400654, Commented Apr 22, 2014 at 18:21
Take a look at my approach, maybe you like it if you use jQuery. In vanilla JavaScript you would need dataset. — Tim Vermaelen
– Tim Vermaelen, Commented Apr 22, 2014 at 18:21

Joseph · Accepted Answer · 2014-04-22 18:26:20Z

2

The data-* approach is better, especially if you have data coming from the server. You wouldn't want to mess up your JS because some server-side language is written along with it.

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

As for the script, you can harvest all data-* using .data():

var username = $('#username');
var data = username.data();  // {type: 'text',pk: 1,url: '/post',title: 'Enter username'}
var username.editable(data);

answered Apr 22, 2014 at 18:26

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chobo2 Over a year ago

That is my thinking if data comes from the server like the PK it is going to alot easier to set in the html through server side variables but I am not sure about the urls that I would in the javascript if it is better to not just have it in the javascript then instead of trying to grab it out of the "data" later on. In the case of x-editable it is handled behind the scenes unless you want to setup your own ajax stuff.

Tim Vermaelen Over a year ago

I've noticed if you simply use data() on an object with several data- attributes, the output is not the same and starts changing properties with CamelCasing and such ... pretty weird. ex: data-js-params="x" => JsParams: x

Tim Vermaelen Over a year ago

Now I think of it, if you use a second dash - the property would be invalid. Like that it's not weird and you shouldn't use an additional dash.

Joseph Over a year ago

@TimVermaelen jQuery automatically converts data-* to camelCase.

Collectives™ on Stack Overflow

Use data- or put in Javascript?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related