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

Question

我在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);
}

答案:问题是我在渲染过程中创建了链接.即第一次渲染(从init调用),事件成功绑定到链接.但是,由于以下所有的render调用都会重新创建整个元素,因此新链接没有绑定到它的处理程序.这是通过添加this.delegateEvents()到渲染的@Tom Tu解决方案解决的

Answer 1

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

其他可能性是你设置了events错误的对象 - 很难从提供的代码量中分辨出来,但我打赌第一个.

Answer 2

一个非常普遍的挑战.对于这个问题的未来发现者,这里有一篇关于视图渲染的精彩文章:

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

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