Backbone: event lost in re-render

by

When you do this:

this.$el.html( this.subView.render().el );

You’re effectively saying this:

this.$el.empty();
this.$el.append( this.subView.render().el );

and empty kills the events on everything inside this.$el:

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

So you lose the delegate call that binds events on this.subView and the SubView#render won’t rebind them.

You need to slip a this.subView.delegateEvents() call into this.$el.html() but you need it to happen after the empty(). You could do it like this:

render: function(){
    console.log( "Composer.render" );
    this.$el.empty();
    this.subView.delegateEvents();
    this.$el.append( this.subView.render().el );             
    return this;
}

Demo: http://jsfiddle.net/ambiguous/57maA/1/

Or like this:

render: function(){
    console.log( "Composer.render" );
    this.$el.html( this.subView.render().el );             
    this.subView.delegateEvents();
    return this;
}

Demo: http://jsfiddle.net/ambiguous/4qrRa/

Or you could remove and re-create the this.subView when rendering and sidestep the problem that way (but this might cause other problems…).

More Related Contents:

  1. Destroy or remove a view in Backbone.js
  2. Backbone 0.9.9: Difference between listenTo and on
  3. Backbone View: Inherit and extend events from parent
  4. How to capture the key event from a view?
  5. Underscore template throwing variable not defined error
  6. Explanation of …
  7. Best way to iterate over an array without blocking the UI
  8. How to override Backbone.sync?
  9. Backbone.js Empty Array Attribute
  10. Loading Backbone and Underscore using RequireJS
  11. Backbone.js fetch with parameters
  12. How to use if statements in underscore.js templates?
  13. Finding JavaScript memory leaks with Chrome
  14. “Single-page” JS websites and SEO
  15. Backbone.js and pushState
  16. Backbone.js model.get() returning ‘undefined’ even though I can see the attributes in console.log
  17. Backbone.js get and set nested object attribute
  18. In Javascript, what does this underscore mean?
  19. correctly implement backbone comparators
  20. The collection nested inside firebase collection’s model doesn’t have add function
  21. How do I fetch a single model in Backbone?
  22. Accessibility and all these JavaScript frameworks
  23. start javascript code with $(function, etc
  24. What is the purpose of backbone.js?
  25. Tell screen reader that page has changed in Backbone/Angular single-page app
  26. What is the difference between these Backbone/Underscore .bind() methods?
  27. Extending React.js components
  28. Uncaught SyntaxError: Failed to execute ‘querySelector’ on ‘Document’
  29. Super in Backbone
  30. rails and backbone working together

Leave a Comment