Destroy views in trunk mode when changing a route

Question

My view should be destroyed after the current position of the route is left.

So, in this schematic example, the login view should be destroyed after the user has entered their credentials:

I tried to solve this problem using the Backbone.Router events:

 var Router = Backbone.Router.extend({ initialize: function () { Backbone.history.start(); }, routes: { "sample" : "sample" }, sample: function(){ // Build view var demoView = $("<div/>") .appendTo(document.body) .text("I am lost!"); // Destroy view this.once('route', function(){ demoView.remove(); }); }, }); 

Unfortunately, this does not work as route events rise after routes are executed:

http://jsfiddle.net/hcuX9/

Is there a solution to destroy views after exiting the route?

Should I hack a new event in Backbone.js?

Answer 1

What I'm using is to have an App.current variable pointing to the visualization of the current view.

At the top of each route (or corresponding in your case), I delete the current view from App.current , and then assign it a new view:

 someRoute: function() { if(App.current && App.current.remove) App.current.remove(); // Asign a new current page App.current = new SomeView(); ... } 

That way, I only allow one real-time scan of a route, getting rid of issues like yours.

If you do not like checking App.current and calling the remove method at the beginning of each route, you can listen to the Backbone.history route event and enter this logic there:

 Backbone.history.on('route', function() { if(App.current && App.current.remove) App.current.remove(); }); 

Answer 2

I think that you are stuck in your hack if you cannot adapt .listenTo to your needs - then you will need to trigger a special event using .trigger wherever you have a route change, which may not be possible. Note that this function was requested (and denied) earlier in the trunk:

https://github.com/documentcloud/backbone/pull/494

See that stretch request for other patches that try to do the same thing you do.

Answer 3

Here we use on and off to listen for route events, not once , because we cannot rely on a single event that is not the current route. When we get a route, even if it is not our current route, we can destroy the view and remove the listener:

  // Destroy view var self = this; var onRoute = function(route, params){ if(route !== 'sample'){ demoView.remove(); self.off('route', onRoute); } }; this.on('route', onRoute); 

I changed your test script here: http://jsfiddle.net/rgthree/hcuX9/3/

---

Another option, since your violin (and not in your question) goes directly to another species. This causes another route event to fire after sample2 route. Because of this, the above will delete the view. Now it is much more complete. The hacky way you could handle this is to simply set aside once in setTimeout so that it is not tapped until the current route is launched:

 // Destroy view var self = this; setTimeout(function(){ self.once('route', function(){ demoView.remove(); }); }, 0); 

You can see your script using this method here: http://jsfiddle.net/rgthree/hcuX9/4/