Question

In jQuery Mobile, you have to apply data attributes to your HTML so jQuery Mobile knows what to do with it. For example, if you wanted a link to have slide transition, you would do the following:

<a href="#" data-transition="slide"> </a>

This seems like bad practice as you are assigning a style (in the case the slide) to content (the a tag). Normally, the HTML should just contain content with semantic attributes and things like jQuery and CSS should apply styles to these semantic attributes.

It also makes your code repetitive. For example, if you had 20 links, you would have to apply data-transition=”slide” to all of them, which would require a lot of maintenance if you decided you wanted to use a different transition in the future.

Therefore, is using data attributes in this way bad practice?

I have searched around for articles explaining another way on how to use jQuery Mobile, but it seems this is the only way. So I thought I would ask about it to make sure my understanding was not wrong!

Answer 1

I think it is not a bad practice to use data atributes. In any case, you can always set some default configuration for jQueryMobile and minimize their use. Check this section of the documentation.

For example, instead of adding attribute data-transition to all your links you could specify the following:

$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition = "slide";
});

There are other configuration options available. I recommend you to take a look to the previous link.