0

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 elements that were bound 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 title.

The reason for this was so I could mess around with the style and rename classes without worrying about breaking the app. It also means in the template I can tell what the dynamic elements are without needing to go back and forth with the Backbone View.

My question now is, without using the [name] selector, does anyone have a code convention to keep track of which HTML elements are referenced from JS.

I have considering:

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

Thanks!

FYI: I'm using CoffeeScript, Backbone and haml_coffee templates.

Updated jsperf to test all suggestions:

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

Community
  • 1
  • 1
vaughan
  • 6,982
  • 6
  • 47
  • 63

2 Answers2

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.

sirhc
  • 6,097
  • 2
  • 26
  • 29
  • Thanks sirhc. This is the approach I have settled with, I'm going to use .bind because its a little shorter. – vaughan Feb 11 '12 at 09:53
  • It doesn't stand out that much though. I was hoping there might be some HTML element that I could use. I just read on another SO question (http://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5) that it is possible to use your own HTML tags too. – vaughan Feb 11 '12 at 10:01
  • 1
    However, custom tags should *only* be used when you are creating a *new element*. This means is that this element has cannot be described by any other form of HTML. You are classifying certain *existing elements* as dynamic. Hence, I would not recommend the use of a custom tag. – sirhc Feb 12 '12 at 03:16
0

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).

Radek
  • 3,913
  • 3
  • 42
  • 37
  • Thanks, but I want to avoid using attributes as selectors because of the associated performance penalty. I considered using something like `data-bind` just as an indication in the source that it is bound and then only reference it by its classname, but it seems wrong. Also, I'm not actually requiring a way of referencing a view from an element, more often the other way round - modifying an element from a view. – vaughan Feb 14 '12 at 00:35