title: Routing Backbone
body: <p>I've trying to make routing work on Backbone but its quite cryptic to me at this point. This is what I have</p>
  
  <pre><code>    routes: {
          ''            : 'home',
          'home'        : 'home',
          'departments' : 'departments',
          'employees'   : 'employees',
          'requests'    : 'requests'
      },
  
      home: function(){
          new app.HomeView();
      },
  </code></pre>
  
  <p>This is inside my router and obviously I call Backbone.history.start(). On my view I have the pattern to define a render function and call it from the initialize method. </p>
  
  <pre><code>    el: '#containerList',
  
      template: Handlebars.compile( $('#home-template').html() ),
  
      initialize: function(){         
          this.render();
      },
  
      render: function(){
          this.$el.html( this.template());
          return this;
      },
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id='main' class='container'&gt;
    &lt;section id='containerList'&gt;&lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I have the following issues: </p>
  
  <ol>
  <li>On back button, views get appended. I need to reload the page to fix this.</li>
  <li>Whenever writing the route on the browser search bar I need to reload it twice to get the view to show. It has a very unstable behavior, sometimes it renders the views without the collections.</li>
  </ol>
  
  <p>I've read many strategies, to use event on CloseView, use this.remove on leaving the view. Apparently nothing of this works for me. I see little documentation of routers on backbone.</p>