Backbone 多次触发点击事件

Question

我看到很多关于这个的问题，但是没有人解决我的问题。

我有一个主页面 div，默认情况下有一个 div one-image。还有一个按钮，您可以添加其他 div。所以我有一个事件 click，它附加了另一个带有 "remove" 按钮的 div 模板。像这样：

图像堆栈

<div class="image-stack">
  <div class="one-image">
     ...
     <a id="addImage">Add another image</a>
     ...
  </div>
</div>

图像模板

<script type="text/template" id="another-image-template">
  <div class="one-image">
     ...
     <a id="addImage">Add another image</a>
     <a id="removeImage">Remove image</a>
     ...
  </div>
</script>

查看

events: { 
          'click #addImage' : 'addAnotherImage',
          'click #removeImage' : 'removeThisImage'
},

addAnotherImage: function(e) {
  var another = $('#another-image-template').html();
  $('.images-stack').append(another);
},

removeThisImage: function(e) {
  $(e.currentTarget).closest('.one-image').remove();
}

这很好用。当我点击 "Add" 按钮时，它会在最后一个下面添加一个新的 one-image div；当我单击 "Remove" 按钮时，它会删除我单击的 div。如果我更改视图并返回同一视图（总是使用 Backbone 中的 new 创建），image-stack 只有一个 div one-image，很好。但是，当我单击 "Add" 按钮时，它会附加 two one-image divs。如果我重复前面的步骤，它会附加 three.

我已经检查过，该函数被调用了两次（三次等等...）。我不明白为什么会这样，因为 remove() 正在从 DOM 中删除对象并且我总是用 new 初始化 view。有什么想法吗？

Answer 1

您的问题可能与您的视图没有关闭和解除绑定有关。它被称为僵尸视图。通过调用 this.remove() 和 this.off() 应该清除对视图的所有引用。

看看下面的：

this.remove() - http://backbonejs.org/#View-remove
this.off() - http://backbonejs.org/#Events-off

和

https://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
Backbone zombie views & good practice
Preventing backbone zombie views

Backbone 多次触发点击事件

Backbone click event being fired multiple times

javascript

jquery

events

backbone.js

parse-platform

图像堆栈

图像模板

查看