A Convention For Indicating Whether An HTML Element Is Referenced From JS Code

This is a follow-up question for In jQuery is it a bad idea to use name=X for all selectors? I am using Backbone and decided that I wanted a way to differentiate between HTML elem

Solution 1:

I would consider using a class to indicate that it is dynamic. I'm not sure if you are aware of this but you can have multiple classes on one element. Like so:

.container
  .dynamic.title(name='title')
  .separator  

This works in traditional HAML but I have not tried it with haml-coffee. If it doesn't work, you might have to specify the class like .title{:class => "dynamic"}(name='title').

I prefer this over a prefix on the class name because it's more semantically meaningful, which is how HTML should be used.

Solution 2:

I am using data-view attribute on elements being set when rendering my Views.

This helps me to then show a tooltip in a browser window when I hover over View(s).