Backbone.js点击事件不会触发先前添加的子视图

时间:2013-07-19 19:04:50

标签: javascript backbone.js click backbone-events

我一直在努力解决这个问题!

用例是我认为非常普遍的用例;我有一个按钮(<button id="add-item">),它将一个新的元素元素(<div class="item">)添加到容器元素(<div id="list">)中,而该容器元素又应显示一个表单(<form>)面板中的项目(<div id="panel">)。我希望能够点击这些项目并让面板显示特定于该项目的表单。

问题唯一识别点击事件的项目是最后添加的项目;以前添加的项目视图都不会识别单击。

之前我在List上的.item视图上点击了一个事件,但Backbone.js社区的一位知名成员告诉我,项目视图真的应该处理点击本身而不是将该责任委托给它的容器。

为了帮助那些可能帮助您理解问题的人,我已经创建了一个非常简单且自包含的示例来说明。您可以在以下三(3)个地方看到它们:

另外,如果您对如何更好地构建此代码有任何建议,我会非常热心地听到它们;我是Backbone.js的新手,并不觉得我完全理解它的模式,习惯和惯用语。

P.S。我已经阅读了StackOverflow上的所有内容,我可以找到并且我找不到任何可以解决问题的内容,所以如果你想把我的问题作为重复关闭,请帮我一个忙,并确保它实际上是重复的。

更新

我正在修复代码,但让错误的this.$el.empty()注释掉,以便其他人可以从中学到同样的问题。感谢@sardine / @tollmaz通过Twitter帮助我解决这个问题。

1 个答案:

答案 0 :(得分:1)

根据Twitter conversation,事实证明问题在于:

this.$el.empty();

创建新项目时,会设置事件。单击该项后,将执行select方法。作为此方法的一部分,app.ListView的实例将执行其render方法。在此方法中,$el(实际为#list)将被清空。因此,先前创建的具有工作事件的视图是有效的。虽然它在视觉上重新填充,但事件永远不会重新创建(不知道为什么会这样)。