Adding a custom attribute for a better separation between JavaScript and HTML

Question

Using jQuery and backbone.js, I would like to separate the JavaScript from the HTML as much as possible.
Is it possible to add a custom attribute for a better separation between JavaScript and HTML? And then how can I use the new jQuery selector?

Example:

<input type="text" id="todo-input" class="todo-input" tid="tid-attribute" > hello world </input>

// The DOM events
// I would like to use another selector tid and not class or id
events: {
  "keypress #todo-input" : "updateOnEnter" // I would like to use another selector tid not id,
  "keypress .todo-input" : "updateOnEnter" // I would like to use another selector tid and not class
}

I still don't get it. Do you want separation ? or the attributes bother you. As far as i can tell this is work of the view, do not render anything from the server for the backbone app to depend on. This will make your backbone app deploy anywhere. — Deeptechtons
– Deeptechtons, Commented May 7, 2012 at 5:35
HTML class attributes are used for all sorts of things, not just for styling with CSS. There's nothing wrong with adding extra classes to an element just for use in selectors. — mu is too short
– mu is too short, Commented May 7, 2012 at 5:49

Jesse · Accepted Answer · 2012-05-07 05:52:50Z

3

HTML5 allows for custom data attributes that start with data-:

<input type="text" data-custom-attr="somevalue">

Then in your backbone events declaration:

"keypress [data-custom-attr='somevalue']" : "updateOnEnter"

edited May 7, 2012 at 5:52

answered May 7, 2012 at 5:21

Jesse

5,2041 gold badge20 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thecodeparadox · Accepted Answer · 2012-05-07 05:17:50Z

0

you can use:

$('input[type="text"]').attr('tid', 'tid-attribute');

OR

$('input[type="text"]').attr('data-tid', 'tid-attribute');

answered May 7, 2012 at 5:17

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Collectives™ on Stack Overflow

Adding a custom attribute for a better separation between JavaScript and HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related