为什么在Backbone.js中第二次渲染后事件不触发?

Why are events not firing after the second render in Backbone.js?

本文关键字：事件 Backbone js 第二次 为什么      更新时间：2023-09-26

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

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


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

ANSWER:问题是我在渲染过程中创建链接。例如，在第一次渲染(从init调用)时，事件成功绑定到链接。但是，由于render的所有后续调用都将重新创建整个元素，因此新链接没有将处理程序绑定到它。这是通过添加this.delegateEvents()到渲染

的解决方案解决的。

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

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

一个非常常见的挑战。对于将来发现这个问题的人，这里有一篇关于视图渲染的好文章:

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

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

相关文章：