Reputation: 85875
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
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