Revisiting the <code>data-options</code> data attribute
Yesterday, I posted about a technique I use to set multiple JavaScript plugin options with a single data attribute.
Todd Motto identified a few issues with the implementation I recommended:
- If you break your attributes across multiple lines, as shown in my demo, the code breaks.
- It converts everything into a string, including booleans and numbers.
Todd recommended the use of JSON instead.
Markup
<a
class="example"
href="#"
data-options='{
"speed": 500,
"easing": "easeInOutCubic",
"offset": 0,
"updateURL": false
}'
>
link
</a>
JavaScript
var getDataOptions = function ( options ) {
return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
};
var item = document.querySelector('.example');
var options = getDataOptions( item ? item.getAttribute('data-options') : null );
console.log(options);
// Returns: Object{speed: 500, easing: "easeInOutCubic", offset: 0, updateURL: false}
This approach requires that the data-options
attribute is valid JSON, which is not inherently a bad thing but does make it a bit easier to work with for developers not familiar with that format.
Regardless, I’m converted my plugins that use the data-options
approach over to this implementation.