0

I have searched the internet for ways to trigger the destruction of old views. There are functions to do this, however, I don't know how to trigger them. Ideally, there would be a way to trigger the destruction on the event of closing a view. I can't find a way how to trigger that particular event.

Chris Trudeau
  • 1,427
  • 3
  • 16
  • 20
François Lalonde
  • 9
  • 4

2 Answers2

2

You should call view.remove() to trigger its destruction as specified in the documentation http://backbonejs.org/#View-remove

For example, if you had:

var myView = Backbone.View.extend({
    initialize: function() {
        ...
    },

    render: function() {
        ...
    }
});

You can later call myView.remove() provided you have a reference to myView available.

This method should also remove any event listeners tied to the view if you are using the listenTo (recommended) method as opposed to the on listener. You could also add view.off() to ensure that the events are removed.

Additionally, you will need to add a way for views to listen to a close event so you can call the remove and off methods. You should refer to 1 and 2.

Community
  • 1
  • 1
Monica Olejniczak
  • 1,146
  • 7
  • 9
  • I want to trigger the destruction when i nagivate to a new view, so the view.remove function must be triggered between leaving the old view and entering the new one. That is my problem, I don't know when or where to use the remove function. I hope this will help you understand the issue. – François Lalonde Dec 11 '15 at 04:48
  • You should refer to the links I posted at the bottom of my answer. One way to do this is to modify the Backbone.View class to include a close method. Another is to create a parent class that all your views inherit from which support the close event functionality. Finally, could override the navigate method in your Backbone.Router to perform destruction of an active view, then call the original navigate function or manually setup routes using router.route with a callback function that removes active views. – Monica Olejniczak Dec 11 '15 at 04:51
  • i tried to destroy an existing view in the router by creating a global variable that is associated to the existing view, and destroying it before creating a new view that's newly associated with that global variable, but that doesn't seem to work – François Lalonde Dec 11 '15 at 04:57
  • 1
    Would you be able to post your code and what you have tried in your original question? – Monica Olejniczak Dec 11 '15 at 04:59
  • 1
    @FrançoisLalonde: You'd usually have a `this.currentView` in your router to hold then current view, then you'd `if(this.currentView) this.currentView.remove(); this.currentView = new WhateverView()` when the router switches to a new view. – mu is too short Dec 11 '15 at 05:08
0

This old but fantastic piece by Derick Bailey does a great job at explaining the issue and how to solve it. As Monica rightly suggested this relies on view.remove() but you can update your router to destroy your existing view - Try something similar to 

if (currentView) { 
  currentView.remove();
  currentView = newView();
}
David Garvie
  • 1
  • 1
  • I tried to use if (currentView) { currentView.remove(); currentView = newView(); } – François Lalonde Dec 11 '15 at 21:14
  • I tried to put a this.currentView = null in the initialize of my router, in the cleanup function, the if statement is not entered, it's like if (this.currentView) doesn't work.. – François Lalonde Dec 11 '15 at 21:17
  • At some point you will need to update this.currentView to the view that you wish to remove. It probably makes sense to do this within your individual backbone routes and then creating a separate function which contains your if statement which can be called each time you navigate to a new backbone route. – David Garvie Dec 12 '15 at 13:20