delegateEvents in backbone.js

backbone.js backbone-events
Yaron Naveh picture Yaron Naveh · Jun 17, 2012 · Viewed 24.6k times · Source

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

tgriesser picture tgriesser · Jun 17, 2012

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.

Related questions

Backbone View: Inherit and extend events from parent

Backbone's documentation states: The events property may also be defined as a function that returns an events hash, to make it easier to programmatically define your events, as well as inherit them from parent views. How do you inherit a …

Read More
Backbone.js - using trigger to trigger event and pass data

I'm writing a tab menu component using backbone.js as an MVC framework. When a user clicks on a tab, the component will switch tabs (internal operation), but then I would like listeners of the component to respond to the …

Read More
Backbone model.destroy(): Is explicit removal from collection necessary?

I have a simple question. I am looking at a function with 2 lines of code: deleteTask: function() { this.parent.collection.remove(this.model); this.model.destroy(); } If I comment out the first line, which is supposed to remove the model …

Read More