javascript - 主干表行 View ，只有一个事件监听器？

Question

基本上，我想要做的是为 HTML 表格的每一行创建一个 Backbone View ，当我渲染表格时，我可以轻松完成此操作，我为每个 tr 实例化一个backbone.view，这将是“el” View 。

但是，这会导致每个 tr 都有一个事件监听器，效率不太高。有没有一种方法可以完成同样的事情，即让每个行 View 的“el”成为 tr，但所有事件都从表元素委托(delegate)，以便只存在一个事件监听器？

也许有一个表的父 View 并以某种方式委托(delegate)所有事件，或者我真的不知道如何以一种好的方式解决这个问题，谢谢。

Answer 1

通常的方法是拥有一个 TableView 和多个 RowView。 TableView 将与一个Collection 关联，并且它将根据需要实例化尽可能多的 RowView，并迭代该 Collection。

此外，TableView 将监听 Collection 中的更改，并在 Collection 更改时创建和删除 RowView 实例。

RowView 将监听集合中每个Model 的更改。并监听用户通过与每个模型关联的事件 DOM 元素进行的交互。

我认为这没有任何问题。我认为这是最直观、可维护、优雅的结构。

如果您确实认为让 TableView 一次监听所有行中的事件更好，这不是问题，请尝试以下操作:

var TableView = Backbone.View.extend({
  events: {
    "click tr a.remove", "remove"
  },

  remove: function( event ){
    console.log( "row-id", $(event.target).attr( "data-row-id" ) );
  }
});

只要确保 TableView 可以通过任何特殊属性(例如示例中的 data-row-id)来识别每个 row 即可。但是您必须使用它们到集合中，搜索具体模型并执行操作，当直接在 RowView 中使用此事件时，您可以直接访问模型，并且一切都更加自然。

实际上我不认为你会获得更好的性能，我认为底层 jQuery 会创建相同数量的事件监听器。