Ensuring no memory leaks in backbonejs app

Question

I have a backbonejs app that works something like this:

[Backbone MODEL] <----> [Backbone VIEW] <----> [DOM ELEMENT]

The model and view are created and assigned to local variables within a function scope. If I remove the dom element (by calling jQuery().empty() on it's parent element), will this delete all references to the View & subsequently the Model to avoid zombie objects/memory leaks?

Answer 1

As long as you are never assigning the model or view variables to anything that will stick around. Be wary of closures around the variables, don't attach the variables as attributes of any other object, don't attach the view or model to any events from any other objects. Then yes, this will clean itself up.

But those are some pretty strict rules to abide by and don't play well with most apps. You should be handling the removal of event handlers explicitly, and deleting any attribute on any object you had created.

I have a few articles related to this (seems likely you've read at least one of them, already):

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

an implementation of the zombie's cleanup code, plus more, as an object on it's own: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Memory management in JavaScript and Backbone: http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/