javascript - 添加自定义属性以更好地分离 JavaScript 和 HTML

Question

使用 jQuery 和backbone.js，我想尽可能地将JavaScript 与HTML 分开。
是否可以custom attribute在 JavaScript 和 HTML 之间添加一个更好的分离？那么我该如何使用新的 jQuery 选择器呢？

例子：

<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 允许使用以下开头的自定义数据属性data-：

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

然后在您的主干事件声明中：

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

Answer 2

您可以使用：

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

或者

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