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
}

Answer 1

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"