Agreement to indicate whether an HTML element refers to JS code

Question

This is the next question for. In jQuery, is it a bad idea to use name = X for all selectors?

---

I use Backbone and decided that I needed a way to distinguish between HTML elements that were connected and those that were not.

So I would write (in HAML):

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

As you can see, it’s clear that the dynamic element is the title.

The reason for this was that I could mess around with the style and rename the classes without worrying about breaking the application. It also means that in the template, I can say that dynamic elements do not need to go back and forth with the Backbone View.

Now my question is: without using the [name] selector, does anyone have a code legend to keep track of which HTML elements are referencing JS .

I am considering:

• Use a common prefix for class names (e.g. class=bind-title )
• Using some kind of custom HTML element (

Thanks!

---

FYI: I use CoffeeScript, Backbone and haml_coffee templates.

---

Updated jsperf to check all offers:

http://jsperf.com/class-or-name-attr-lookup/3

Answer 1

I would like to use a class to indicate that it is dynamic. I'm not sure if you know about this, but you can have multiple classes for one element. For instance:

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

This works in traditional HAML , but I have not tried it with haml-coffee . If this does not work, you may need to specify a class, for example .title{:class => "dynamic"}(name='title') .

I prefer this over the class name prefix because it is more semantically meaningful in how HTML should be used.

Answer 2

I use the data-view attribute for the elements that are set when rendering my views.

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