Disposing of view and model objects in Backbone.js

by

you’re on the right path. you should have an object that controls the lifecycle of your views. i don’t like to put this in my view. i like to create a separate object for this.

the thing you need to do, is unbind the events when necessary. to do this, it’s a good idea to create a “close” method on all of your views, and use the object that controls the lifecycle of everything to always call the close method.

for example:


  function AppController(){
    this.showView = function (view){
      if (this.currentView){
        this.currentView.close();
      }
      this.currentView = view;
      this.currentView.render();
      $("#someElement").html(this.currentView.el);
    }
  }

at this point, you would set up your code to only have one instance of the AppController, and you would always call appController.showView(...) from your router or any other code that needs to show a view in the #someElement portion of your screen.

(i have another example of a very simple backbone app that uses an “AppView” (a backbone view that runs the main portion of the app), here: http://jsfiddle.net/derickbailey/dHrXv/9/ )

the close method does not exist on views by default, so you need to create one yourself, for each of your views. There are two things that should always be in the close method: this.unbind() and this.remove(). in addition to these, if you are binding your view to any model or collection events, you should unbind them in the close method.

for example:


  MyView = Backbone.View.extend({
    initialize: function(){
      this.model.bind("change", this.modelChanged, this);
    },

    modelChanged: function(){
      // ... do stuff here
    },

    close: function(){
      this.remove();
      this.unbind();
      this.model.unbind("change", this.modelChanged);
    }
  });

this will properly clean up all of the events from the DOM (via this.remove()), all of the events that the view itself may raise (via this.unbind()) and the event that the view bound from the model (via this.model.unbind(...)).

More Related Contents:

  1. Underscore template throwing variable not defined error
  2. Explanation of …
  3. Best way to iterate over an array without blocking the UI
  4. Why define an anonymous function and pass it jQuery as the argument?
  5. Backbone.js Empty Array Attribute
  6. Loading Backbone and Underscore using RequireJS
  7. External template in Underscore
  8. Getting Chrome to prompt to save password when using AJAX to login
  9. Backbone.js fetch with parameters
  10. What is two way binding?
  11. How to use if statements in underscore.js templates?
  12. Destroy or remove a view in Backbone.js
  13. Finding JavaScript memory leaks with Chrome
  14. Ways to save Backbone.js model data?
  15. “Single-page” JS websites and SEO
  16. Backbone.js and pushState
  17. Backbone: event lost in re-render
  18. Backbone 0.9.9: Difference between listenTo and on
  19. How to improve rendering performance when using $.html()
  20. Backbone View: Inherit and extend events from parent
  21. How do I fetch a single model in Backbone?
  22. start javascript code with $(function, etc
  23. Reverse sort order with Backbone.js
  24. backbone.js structuring nested views and models
  25. Computed properties in Backbone
  26. Tell screen reader that page has changed in Backbone/Angular single-page app
  27. How to capture the key event from a view?
  28. What is the difference between these Backbone/Underscore .bind() methods?
  29. Extending React.js components
  30. Super in Backbone

Leave a Comment