Question

Can anyone please explain me what delegateEvents in backbone.js does? The documentation did not help me to understand.

My exact use case is:

I have a main view X with an inner view Y. They work great, but if I go to main view Z and then go back to X (reusing, not recreating) then events attached to Y child elements get lost. delegateEvents solves this but
I want to understand why.

Answer 1

Essentially, when you call .remove() it is a proxy to the jQuery remove function, which removes the element from the DOM, as well as all associated events from the event hash that were bound to the element.

Backbone’s View element still contains the .el, but upon re-inserting in the DOM, the jQuery element has lost all of it’s bound listeners.

There are a few solutions:

1. Completely destroy the view element, including unbinding all model/controller events with the new destroy method (currently only in the github, it will be added in the next release of Backbone) and create a new view when coming back (rather than just caching and re-rendering) – my preferred method

2. Create a method (or extend remove) to use jQuery’s detatch which apparently does the same as remove without losing the event bindings – haven’t done it but seems like it would work

3. Call .delegateEvents() in every render – what you’re currently doing now

Hope this helps.