title: Backbone.js router navigation going to incorrect route
body: <p>I am having trouble navigating to different routes with a navbar via Backbone. Clicking on <code>#logo</code> and <code>#home</code> properly sends me to <code>index</code>. However clicking on <code>#demo</code> also sends me to <code>index</code> instead of the <code>demo</code> route. Why?</p>
  
  <p><strong>navbar.js</strong></p>
  
  <pre><code>var HeaderNavView = Backbone.View.extend({
    tagName: 'div',
  
    template: _.template( HeaderNavTemplate ),
  
    events: {
      'click #logo': 'goToIndex',
      'click #home': 'goToIndex',
      'click #demo': 'goToDemo'
    },
  
    render: function() {
      var template = this.template();
      this.$el.html(template);
      return this;
    },
  
    goToIndex: function() {
      console.log('go to index');
      IndexRouter = new Backbone.Router();
      var route = '';
      IndexRouter.navigate(route, {trigger: true});
    },
  
    goToDemo: function() {
      console.log('header nav to demo route')
      demoRouter = new Backbone.Router();
      var route = 'demo';
      demoRouter.navigate(route, {trigger: true});
    }
  });
  </code></pre>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>Router = Backbone.Router.extend({
    routes: {
      '': 'index',
      'demo': 'demo'
    },
  
    index: function() {
  
      $('#videoIndex').append( IndexTemplate )
      var headerNavView = new HeaderNavView;
      $('#indexHeaderNav').append( headerNavView.render().el );
  
      ...additional nested views
    },
  
    demo: function() {
  
      $('#demoDetails').append( DemoTemplate );
  
      ...additional nested views
    } 
  });    
  </code></pre>