我正在尝试制作我的第一个搜索应用程序。
在应用程序构建完成后,每个DOM都按照我的预期进行渲染,事件也正常工作。当我深入研究它时,我发现了一个奇怪的行为,在我做了一些搜索后,我发现这是因为 * 僵尸视图 * 事件委托问题。
下面是我的部分代码:
var searchList = Backbone.View.extend({
events:{
'click #submit':function() {
this.render()
}
},
render() {
this.showList = new ShowList({el:$('.ADoM')});
}
});
当单击#submit
时,将创建ShowList
的新示例,并呈现'.ADoM'
DOM。
显示列表.js
var showList = Backbone.View.extend({
events: {
"click .testing": function(e) {
console.log(e.currentTarget);
},
},
initialize() {
this.$el.html(SearchListTemplate());
}
});
'.testing'
按钮事件与它绑定在一起。
因此,正如“僵尸”所做的那样,在多次单击提交后,然后单击'.testing'
按钮,console.log()
将多次输出。
我已经阅读了文章here,并试图了解和修复我的问题,也试图在showList.js
中添加this.remove()
,正如有人提到的,但不幸的是,可能是因为我无法将它们放在我的代码中的适当位置,问题仍然没有解决。
1条答案
按热度按时间dtcbnfnu1#
这与ES6无关,这是基本的JavaScript和DOM操作。
不要共享页面中的相同元素
您正在创建绑定到页面中同一元素的新
ShowList
示例。在Backbone中,这是不好的做法。每个Backbone View示例都有自己的根元素,事件绑定在该元素上。当多个视图共享同一个元素时,事件会在每个示例上触发,并且您不能在视图上调用
remove
,因为它会将DOM元素从页面中完全删除。您应该转储要重用的元素中的子视图根元素。
重复使用视图
render
函数应该是idempotent。您的其他视图也可以简化,以反映父视图的变更。
这是一个关于重用视图而不是总是创建一个新视图的超级基本示例。
有必要进行一些清理
当完成一个视图时,应该在它上面调用
remove
:从DOM中移除视图及其
el
,并调用stopListening
以移除视图具有listenTo
的任何绑定事件。要使其正常工作,当注册模型或集合事件的回调时,use
listenTo
overon
orbind
可避免其他内存泄漏(或僵尸视图)。对于具有多个子视图的视图,一个好的模式是保留每个子视图的引用,并在删除父视图时对每个子视图调用
remove
。查看如何avoid memory leaks when rendering list views。当处理大量视图(大列表或视图树)时,有一些efficiently render with Backbone的方法,其中涉及DocumentFragment批处理和延迟。