Backbone leaves Detached DOM elements no matter how I remove the view

Question

I'm struggling with getting the concept of memory management with single page applications. This is my code:

var FilterModel = Backbone.Model.extend({});
    var taskView = Backbone.View.extend({
        template: _.template('<h1><%= title %></h1>'),
        initialize: function(){
            this.render();
            this.listenTo(this.model, 'destroy', this.remove);
            console.log(this.model)
        },
        render: function(){

            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },
        events:{
            'click h1': 'removeView'

        },
        removeView: function(){
            this.model.destroy();
            console.log('removed');

        }
    });
    var filterModel = new FilterModel({title: 'Test'});
    var taskview = new taskView({model:filterModel});

// I make heap snapshot before and after the change!
    setTimeout(function(){
        $("h1").click()}, 3000
    )
    $('body').append(taskview.$el);

I was told by numerous articles that using "remove" and "destroy" would clean up any memory leaks when removing the DOM tree.

But Chrome profile utility tells otherwise. I get detached DOM elements no matter what I do.

UPDATE!!! After trying a few things in the responses I still get this in Google Chrome: Here is jsfiddle: http://jsfiddle.net/HUVHX/

Answer 1

So Janck, you can fin your answer here: Backbone remove view and DOM nodes

The problems is that you have to do more than just remove you model and view.

You need to properly destroy all of the events and other bindings that are hanging around when you try to close your views.

I don't know if you know about Marionette.js (Backbone.Marionette), but it's a great extension to Backbone to handle this Zombie Views and to create robust JS applications.

You can read some articles about this as well, they were pointed in the Stackoverflow link that I posted.

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/

But the logic is this: If a View is listening a model, then the contrary also occurs, so you'll always get a instance of your View in your DOM.

Answer 2

taskview is still holding a strong reference to this.el, although it is not connected to the dom. This is not a memory leak because taskview is held strongly also by it's variable

To test my assumption just add:

removeView: function(){
  this.model.destroy();
  this.el = undefined;
  this.$el = undefined;
}

Another approach is to undef taskview var

EDIT:

When I change: "click h1" : "removeView" To "click": "removeView" it solves the detached dom node leak.

I suspect this has something to do with jquery selector caching.

You can see in backbone code, the difference is in calling jquery on function with a selector:

if (selector === '') {
   this.$el.on(eventName, method);
} else {
  this.$el.on(eventName, selector, method);
}

I tried to trace the cache deep into jquery code, with no luck.