Question

我已经看到很多关于此的问题，但没有人解决我的问题。

我有一个主div的页面，默认情况下只有一个div one-image。还有一个按钮，您可以添加其他div。所以我有一个事件click，它将另一个div模板添加到＆＃34;删除＆＃34;按钮。像这样：

图像堆栈

<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();
}

这很好用。当我点击＆＃34;添加＆＃34;按钮，它会在最后一个按钮下添加新的one-image div;当我点击＆＃34;删除＆＃34;按钮，它删除我点击的div。如果我更改视图并返回到同一视图（始终在Backbone中使用new创建），则image-stack只有一个div one-image，这很好。但是当我点击＆＃34;添加＆＃34;按钮，它会附加两个 one-image div个。如果我重复前面的步骤，它会附加三个。

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

Answer 1

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

看看以下内容：

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

和

多次触发的骨干点击事件

图像堆栈

图像模板

视图

1 个答案: