CODEWITHSUNDEEP
javascripthtml
chobo2
chobo2

Reputation: 85875

Use data- or put in Javascript?

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.

Upvotes: 0

Views: 566

Answers (1)

Joseph
Joseph

Reputation: 119897

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

Upvotes: 2

Related Questions