当在另一个视图中触发一个函数时,该视图会渲染两次

问题描述 投票:0回答:1

我的应用程序中有两个视图,第一个视图是模式对话框,第二个视图是最初从中触发模式的位置。关闭模态后,我将使用触发事件函数在第二个视图中触发一个函数。第二个视图中的函数被触发,但是它将重新渲染整个第二个视图两次。我已经阅读了有关僵尸视图的信息,并确保取消绑定并删除模态视图,以防它导致重复事件,但不起作用。

这是我的模态视图类:

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的新手。任何帮助,将不胜感激。

更新:我想我已经缩小了导致额外渲染的原因。第二个视图是集合中的一个项目,因此,如果该集合中只有一个项目(即一个视图),那么当我的函数从模式中触发时,它将重新呈现该视图一次。但是,如果集合中有多个视图,则在触发函数时将重新呈现每个视图。我已经初始化了集合中每个项目的模式视图,因此从技术上讲,它应该只重新渲染集合中的一个项目(视图),但每次都重新渲染它们。再次不确定我是否正确低估了骨干事件序列,如果有人遇到类似问题,请告诉我

javascript events backbone.js
1个回答
0
投票

通过将原始视图模型选项传递给模态视图来解决此问题,然后一旦触发函数并重新渲染视图,我通过比较视图来确保仅将生成模态的视图更新为预期信息ID的。我敢肯定,这是一种非常肮脏的方式。

© www.soinside.com 2019 - 2024. All rights reserved.