不可能骨干僵尸 [英] Impossible Backbone Zombies

问题描述

我一直在试图调试最多的一天我的骨干多页的应用程序，现在要摆脱'僵尸'，可惜没有用。今天之前，我甚至不知道我有一个的僵尸问题的。我在做什么错了？

这是我的RegionManager：

  VAR regionManager =（函数（）{
    VAR currView = NULL;
    变种RM = {};    VAR closeView =功能（视图）{
      如果（查看＆安培;＆安培; view.close）{
        view.close（）;
      }
    };    VAR的OpenView =功能（视图）{
      view.render（）;
      如果（view.onShow）{
        view.onShow（）;
      }
    };    rm.show =功能（视图）{
      closeView（currView）;
      currView =视图。
      OpenView的（currView）;
    };    返回RM;
  }）（）;
 

这是我的看法清理功能：

  Backbone.View.prototype.close =功能（）{
    如果（this.onClose）{
      this.onClose（）;
    }    如果（this.views）{
      _.invoke（this.views，'关闭'）;
    }    //解除绑定任何视图的事件。
    this.off（）;    //取消绑定该视图绑定到任何模型和收集的事件。
    如果（this.model）{
      this.model.off（NULL，NULL，这一点）;
    }    如果（this.collection）{
      this.collection.off（NULL，NULL，这一点）;
    }    //清理HTML。
    这$ el.empty（）;
  };
 

我试过直接追加视图报 S到体，并使用这一点。删除（）; 在View清理功能（而不是使用一个共同的 EL：$（'＃内容'）到我附加元素，然后通过清理这一点。$ el.empty（）），但是这也不能工作。

这可能是与我的全球性事件：

  Backbone.Events.on（'letterMouseDown'，this.letterMouseDown，这一点）;
 

不过，我照顾他们用的OnClose功能：

 的OnClose：函数（）{
  Backbone.Events.off（'letterMouseDown'）;
}
 

解决方案

我是pretty确信我找到了根我的问题。

亩太短是正确的，用的close（）方法我没有删除直接绑定到我的报（我试图通过 this.off（） - 这$ el.off（） / this.undelegateEvents（）是正确的方式）。但对我来说，这只是固定的事件得到了所谓的不必要的多次的问题。

我被僵尸意见或无意的行为困扰的原因是，我没有在视图释放内存。

this.remove（）不仅摆脱的报和它的元素/事件，但不能查看的内部变量。为了阐述 - 在我看来，我宣布一个数组，像这样 this.array：[] ，我没有它在的OnClose <释放/ code>功能。

空我所要做的就是空，在的OnClose 函数或最初声明数组为 this.array C>等反复查看渲染这样做至少可以释放previous阵列（应该还是在的OnClose 方法被释放，但因为该数组/对象仍要在存储器坐直到从页面浏览的距离）。

这是<强>难以忍受，以调试，因为它是一个填字游戏（至少我的code是很难读那里），有时的话不匹配，但我没有知道问题出在哪里是从哪里来。

吸取的教训。

I've been trying to debug my Backbone multi-page app for most of the day now to get rid of 'zombies', but unfortunately to no avail. Before today, I didn't even realize I have a zombie problem. What am I doing wrong?

This is my RegionManager:

  var regionManager = (function() {
    var currView = null;
    var rm = {};

    var closeView = function(view) {
      if (view && view.close) {
        view.close();
      }
    };

    var openView = function(view) {
      view.render();
      if (view.onShow) {
        view.onShow();
      }
    };

    rm.show = function(view) {
      closeView(currView);
      currView = view;
      openView(currView);
    };

    return rm;
  })();

This is my View cleaning up function:

  Backbone.View.prototype.close = function() {
    if (this.onClose) {
      this.onClose();
    }

    if (this.views) {
      _.invoke(this.views, 'close');
    }

    // Unbind any view's events.
    this.off();

    // Unbind any model and collection events that the view is bound to.
    if (this.model) {
      this.model.off(null, null, this);
    }

    if (this.collection) {
      this.collection.off(null, null, this);
    }

    // Clean up the HTML.
    this.$el.empty();
  };

I tried appending the View els directly to the body and using this.remove(); in the View clean-up function (instead of using a common el: $('#content') to which I am appending elements, then cleaning up by this.$el.empty()), but that didn't work either.

It might have something to do with my "global Events":

Backbone.Events.on('letterMouseDown', this.letterMouseDown, this);

But I take care of them with the onClose function:

onClose: function() {
  Backbone.Events.off('letterMouseDown');
}

解决方案

I'm pretty sure I found the root for my problem.

mu is too short was right, with the close() method I wasn't removing the events bound directly to my el (which I tried to do by this.off() - this.$el.off()/this.undelegateEvents() is the correct way). But for me, it only fixed the problem that events got called multiple times unnecessarily.

The reason I was plagued by 'zombie views' or unintended behavior was that I wasn't freeing up the memory in the View..

this.remove() only gets rid of the el and it's elements/events, but not the View's internal variables. To elaborate - in my View I have an array declared like so this.array: [] and I didn't have it freed in the onClose function.

All I had to do was empty it in the onClose function or initially declare the array as this.array: null so on recurrent View renderings it would at least free the previous array (it still should be freed on the onClose method though, because the array/object is still going to sit in the memory until browsing away from the page).

It was excruciating to debug, because it's a crossword game (at least my code is hard to read there) and sometimes the words didn't match up, but I didn't know where the problem was coming from.

Lessons learned.

这篇关于不可能骨干僵尸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！