title: Destroy Backbone views on route change
body: <p>My view should be destroyed after the current route position is left.</p>
  
  <p>So in this schematic example the login view should be destroyed after the user entered his credentials:</p>
  
  <p><img src="https://i.stack.imgur.com/FXdgo.png" alt="Routes"></p>
  
  <p>I tried to solve this by using <code>Backbone.Router</code> events:</p>
  
  <pre><code>var Router = Backbone.Router.extend({
      initialize: function () {
          Backbone.history.start();
      },
      routes: {
          "sample" : "sample"
      },
      sample: function(){
        // Build view
        var demoView = $("&lt;div/&gt;")
            .appendTo(document.body)  
            .text("I am lost!");
  
        // Destroy view
        this.once('route', function(){
          demoView.remove(); 
        });
      },
  });
  </code></pre>
  
  <p>Unfortunately this does not work as the route events are raised <strong>after</strong> the routes are executed:</p>
  
  <p><a href="http://jsfiddle.net/hcuX9/" rel="nofollow noreferrer">http://jsfiddle.net/hcuX9/</a></p>
  
  <p>Is there a solution to destroy views after leaving the route position?</p>
  
  <p>Do I have to <a href="http://jsfiddle.net/hcuX9/1/" rel="nofollow noreferrer">hack a new event</a> into Backbone.js?</p>