主干表行视图，只有一个事件监听器？答案

【问题标题】：Backbone table row view, with just one eventlistener?主干表行视图，只有一个事件监听器？
【发布时间】：2012-07-28 16:09:07
【问题描述】：

基本上我想做的是为我的 HTML 表的每一行创建一个 Backbone 视图，当我渲染我的表时我可以很容易地完成这个我为每个 tr 实例化一个主干视图，这将是“el”视图。

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

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

【问题讨论】：

为什么每行都有一个视图？

标签： javascript jquery backbone.js

【解决方案1】：

解决这个问题的正常方法是拥有一个TableView 和多个RowViews。 TableView 将与Collection 相关联，它会根据需要在此集合上迭代实例化尽可能多的RowViews。

如果 Collection 发生变化，TableView 还将监听 Collection 中的更改并创建和删除 RowView 实例。

RowView 将监听集合中每个Models 的变化。并且监听通过与每个模型关联的活动 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" ) );
  }
});

只需确保每个row 都可以通过任何特殊属性被 TableView 识别为示例中的data-row-id。但是你必须去集合，搜索具体的模型并在消费时采取行动此事件直接在 RowView 中，您可以直接访问模型，一切工作更自然。

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

【讨论】：