如何在不影响DOM的情况下从元素中分离主干视图?

Question

我们正在使用Backbone视图来增强我们的应用程序，并且我们的应用程序的体系结构要求我们将视图附加到现有的DOM元素上。

我们最近遇到了一种情况，需要从DOM元素中分离主干视图，而不移除DOM元素本身。因此，我们不能使用View.remove()，因为它会反过来调用this.$el.remove();

我最初创建了以下方法来分离视图，但我担心我可能会导致内存泄漏:

detach: function() {
  this.stopListening();
  this.unbind();
  this.setElement(null);
}

这有效地将View的元素替换为空的jQuery对象，并解除所有Backbone事件的绑定。然而，我突然想到jQuery可能会存储对新的空对象的引用。我不完全清楚jQuery的内部，所以我不能评论这个方法的有效性。

然后我修改了方法如下:

detach: function() {
  this.stopListening();
  this.unbind();
  this.undelegateEvents();
  this.el = null;
  this.$el = null;
}

我认为这更好地实现了预期的结果，因为它删除了对DOM和jQuery的所有引用。我对这种方法没有100%的信心，所以我想知道其他人是如何处理这种情况的。

这个方法看起来合理吗?有更好的方法来实现这一点吗?

Answer 1

扩展View并重写remove，这样它就不再调用这个了。

例子

var EnhanceView = Backbone.View.extend({
 remove: function() {
  this.stopListening();
  return this;
 }
});