为什么 Backbone.js 中的第二次渲染后没有触发事件？答案

【问题标题】：Why are events not firing after the second render in Backbone.js?为什么 Backbone.js 中的第二次渲染后没有触发事件？
【发布时间】：2012-01-08 14:59:14
【问题描述】：

我正在 Backbone.js 中创建一个具有父视图和多个子视图的应用程序。子视图包含它们侦听和执行功能的链接。

父级存储所有子级视图的列表。在 render 函数中，计算完自己的 html 后，它会执行以下操作：


$(this.el).html(html);
for (var i = 0; i < this.views.length; i++){
    $('.children', this.el).append(this.views[i].render().el);
}

回答：问题是我在渲染期间创建了链接。 IE。在第一次渲染（从 init 调用）时，事件成功绑定到链接。但是，由于所有后续的 render 调用都重新创建了整个元素，因此新链接没有绑定处理程序。这是通过@Tom Tu 将this.delegateEvents() 添加到渲染中的解决方案解决的

【问题讨论】：

标签： javascript jquery backbone.js

【解决方案1】：

您可能在某处使用 jquery remove 函数从视图中删除子视图 - 它会自动删除绑定到元素 (this.el) 的所有事件 - 在 events 对象中设置。您可以在渲染模板后在子视图的渲染中使用 this.delegateEvents() 方法重新绑定在 events 对象中设置的事件委托，或者使用 jquery detach 方法从 DOM 中删除元素而不删除事件绑定 (link) . delegateEvents 方法非常昂贵，因此我建议使用 detach 方法来删除要重用的元素，如果您正在呈现长的子视图列表 - 如果它只是几个视图，则无关紧要。

另一种可能性是您将 events 对象设置错误 - 从提供的代码量很难判断，但我敢打赌第一个。

【讨论】：

添加了更多细节，希望对您有所帮助
这是一个非常好的想法，但我在上面添加了删除代码。此外，事件不能设置错误，否则一开始就不会触发。

【解决方案2】：

一个非常常见的挑战。对于这个问题的未来发现者，这里有一篇关于视图渲染的精彩文章：

您只需要确保在 .html() 运行时调用 delegateEvents 以重新绑定子视图上的事件。由于 Backbone 的 setElement 已经调用了 delegateEvents，一个快速的解决方案可能看起来像这样......

http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/

【讨论】：

这正是我要寻找的。谢谢！