Удален элемент DOM базового вида

Question

Я продолжаю читать о проблеме зомби Backbone.js (или утечки памяти). По сути, вам нужно отсоединить и удалить элемент из DOM, когда он вам больше не нужен, чтобы убедиться, что все события также удалены.

Теперь у меня есть одностраничное приложение с несколькими контейнерами:

<div id="page1"></div>
<div id="page2"></div>

и добавьте мои шаблоны underscore.js к этим заполнителям. У меня есть модель на странице, как:

HomeView = Backbone.View.extend({
  el: '#page1'
)}

Теперь, когда я нажимаю на элемент на этой странице, я перехожу к другому представлению Backbone.js:

clicked: function(ev){
  $(this.el).remove(); // <-- this is the problem
  $(this.el).unbind();
  App.navigate('page/2', true);
}

Это работает нормально, но ... Я удалил элемент page1 из DOM, поэтому, когда я использую кнопку "Назад", чтобы перейти на предыдущую страницу, мой элемент исчезает, и нет ничего, к чему можно присоединить HTML.

Я, вероятно, не понимаю, как связать представления Backbone.js с DOM ... следует ли сохранять элемент с риском утечек памяти?

Спасибо!

Answer 1

Что касается потери элемента page1 на вашей странице и, следовательно, невозможности заполнить элемент HTML, я сделал следующее:

Вместо использования:

this.remove();

... который полностью удаляет элемент, а затем пытается выяснить, как добавить его обратно, я использую jQuery:

$(this).empty;

Это очищает все дочерние элементы, текст, а также обработчики данных и событий.Больше информации на: http://api.jquery.com/empty/

На самом деле, я использую все следующее, что может быть излишним, но мы увидим:

this.undelegateEvents();
$(this).empty;
this.unbind();

Надеюсь, это полезно!

Answer 2

Как говорится в статье (да, я уже пробовал его методы в своих собственных проектах), вам нужно найти способ удалить элемент DOM вашего представления и отменить привязку событий. Однако есть 2 типа событий: 1) магистральные события, 2) события, связанные с вашими элементами DOM с помощью jQuery.

Так что вместо твоего:

$(this.el).remove();
$(this.el).unbind();

Сделайте это:

this.remove();
this.unbind();

Вы также удаляете события Backbone; и this.remove в представлении вызовет $(this.el).remove();.

Однако это только то, как убрать вид и не оставлять зомби. Вы должны рассмотреть его методы показа представления, чтобы сделать этот процесс более автоматическим. Это все в его статье.

Answer 3

Базовая версия разработки (master) теперь предоставляет _removeElement ()

 remove: function() {
      this._removeElement();
      this.stopListening();
      return this;
    },

Удалите элемент этого представления из документа и всех прослушивателей событий, прикрепленных к нему.Предоставляется для подклассов с использованием альтернативного API манипулирования DOM.

_removeElement: function() {
      this.$el.remove();
    },

http://backbonejs.org/docs/backbone.html