我一直在努力解决这个问题!
用例是我认为非常普遍的用例;我有一个按钮(<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帮助我解决这个问题。
答案 0 :(得分:1)
根据Twitter conversation,事实证明问题在于:
this.$el.empty();
创建新项目时,会设置事件。单击该项后,将执行select
方法。作为此方法的一部分,app.ListView
的实例将执行其render
方法。在此方法中,$el
(实际为#list
)将被清空。因此,先前创建的具有工作事件的视图是有效的。虽然它在视觉上重新填充,但事件永远不会重新创建(不知道为什么会这样)。