【发布时间】:2020-02-29 22:42:43
【问题描述】:
我的应用程序中有两个视图,第一个视图是模态对话框,第二个视图是最初触发模态的位置。关闭模式后,我正在使用触发事件函数在第二个视图中触发一个函数。第二个视图中的函数被触发,但是它重新渲染整个第二个视图两次。我已阅读有关僵尸视图的信息,并确保取消绑定并删除模态视图,以防它导致重复事件,但这不起作用。
这是我的模态视图类:
var BaseModalView = base.views.View.extend({
tpl: templates.get('modalTmp'),
className: 'modal-view',
events: {
'evt:show': 'show',
'evt:hide': 'hide',
'click [data-action=resume-push-market]': 'proceed',
},
initialize: function(options) {
this.options = options;
_.bindAll(this, 'render', 'show', 'hide', 'remove');
this.render();
},
render: function() {
this.$el.html(this.tpl(this.options));
this.$el.appendTo('body');
this.$modal = this.$('.modal');
this.$modal.on('hidden.bs.modal', _.bind(function() {
this.close();
}, this));
},
show: function() {
this.$modal.modal('show');
},
hide: function() {
this.$modal.modal('hide');
},
proceed: function() {
e.preventDefault();
e.stopPropagation();
this.hide();
this.vent.trigger('resume', true);
},
close: function() {
//unbind events
this.unbind();
//Remove html from page
this.remove();
},
});
export default BaseModalView;
这就是我在第二个视图上监听触发器的方式:
this.listenTo(this.vent,'resume', this.resume);
经过一些调试后,我注意到模态视图只有在第二个视图在函数触发后渲染两次后才被解除绑定和删除。我不确定这是否是正常行为,因为我对 Backbone.js 很陌生。任何帮助将不胜感激。
更新: 我想我已经缩小到导致额外渲染的原因。第二个视图是集合中的一个项目,因此如果该集合只有一个项目,即一个视图,那么当我的函数从模式触发时,它将重新呈现该视图一次。但是,如果集合中有多个视图,则每个视图将在触发函数时重新呈现。我已经在集合中的每个项目中初始化了模态视图,因此从技术上讲,它应该只重新呈现集合中的一个项目(视图),但它每次都重新呈现它们。再次不确定我是否正确地低估了主干事件序列,如果有人遇到类似的问题,请告诉我
【问题讨论】:
-
第二个视图在哪里?
this.resume是什么?请看minimal reproducible example -
该函数中的内容并不重要,它在该视图中执行一些逻辑。我已经通过只有一个 console.log('got here'); 测试了该功能。语句,它触发的次数与集合中的视图一样多
-
那么重要的是视图中的内容......
-
我不能在这里发布该代码作为它的专有代码。我可以说它的初始化方式与模态视图相同,并且每次在该视图中发生任何类型的更改时,它都会重新呈现。仅出于上下文考虑,如果我从等式中取出模态并从视图中触发恢复功能,它只会重新渲染该视图一次
标签: javascript events backbone.js