title: Render Backbone View on click (via Router push state)
body: <p>I've got an app with 3 pages which I'm trying to render on click. The first page is a landing page. The other two should be rendered upon clicking a link. They are all contained inside of the same container div#modal-content</p>
  
  <p>My HTML is as follows:</p>
  
  <pre><code>&lt;script type="text/x-handlebars-template" id="landingPage"&gt;
      &lt;div&gt;
         &lt;div class="auth-wrapper"&gt;
             &lt;div class="logo"&gt;
                 &lt;img src="img/login/logo-landing.png"/&gt;
             &lt;/div&gt;
             &lt;div class="to-auth-buttons-wrapper"&gt;
                 &lt;a class="btn-to-auth btn-login" href="#signup-page"&gt;Sign Up&lt;/a&gt;
                 &lt;a class="btn-to-auth btn-signup" href="#login-page"&gt;Log In&lt;/a&gt;
             &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>My router function is as follows:</p>
  
  <pre><code>var Approuter = Backbone.Router.extend({
      initialize: function() {
          console.log('router initialized'); 
              Backbone.history.start({ pushState: true });   
      },
  
      routes: {
          '': 'main',
          'signup-page' : 'signup',
          'login-page' : 'login'
      },
  
      main: function() {
          this.landing = new LandingView({ el: $('#modal-content') });
          slider.slidePage(this.landing.$el);
      },
  
      signup: function() {
          this.signuppage = new SignUpView({ el: $('#modal-content') });
          console.log("LANDING VIEW: Signup clicked");
      },
  
      login: function() {
          this.loginpage = new LoginView({ el: $('#modal-content') });
          console.log("LANDING VIEW: Login clicked");
      }
  });
  </code></pre>
  
  <p>And the view files are as follows:</p>
  
  <pre><code>var SignUpView = Backbone.View.extend({
      initialize: function() {
          this.render();
      },
  
      render: function() {
          var template = Handlebars.compile($('#signUpPage').html());
  
          this.$el.html(template);
      },
  });
  </code></pre>
  
  <p>and </p>
  
  <pre><code>var LoginView = Backbone.View.extend({
      initialize: function() {
          this.render();
      },
  
      render: function() {
          var template = Handlebars.compile($('#loginPage').html());
  
          this.$el.html(template);
      },
  });
  </code></pre>
  
  <p>Additionally, here are my templates:</p>
  
  <pre><code>&lt;div id="modal-content"&gt;
  
    &lt;script type="text/x-handlebars-template" id="landingPage"&gt;
        &lt;div&gt;
           &lt;div class="auth-wrapper"&gt;
               &lt;div class="logo"&gt;
                   &lt;img src="img/login/logo-landing.png"/&gt;
               &lt;/div&gt;
               &lt;div class="to-auth-buttons-wrapper"&gt;
                   &lt;a class="btn-to-auth btn-login" href="#/signup-page"&gt;Sign Up&lt;/a&gt;
                   &lt;a class="btn-to-auth btn-signup" href="#/login-page"&gt;Log In&lt;/a&gt;
               &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
    &lt;/script&gt;
  
    &lt;script type="text/x-handlebars-template" id="signUpPage"&gt;
        &lt;div&gt;
  
           &lt;div class="header"&gt;
               &lt;a href="#" class="btn"&gt;Back&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class="auth-wrapper"&gt;
  
  
               &lt;div class="logo"&gt;
                   &lt;img src="img/login/logo-landing.png"/&gt;
               &lt;/div&gt;
  
               &lt;form method="post" id="userSignUp"&gt;       
                   &lt;input class="form-control input-signin" type="text" name="username" placeholder="Name" id="userName"&gt;
                   &lt;input class="form-control input-signin" type="text" name="useremail" placeholder="Email" id="userEmail"&gt; 
                   &lt;input class="form-control input-signin" type="text" name="userpass" placeholder="Password" id="userPassword"&gt;
  
                   &lt;a class="btn-to-auth btn-login js-btn-login"&gt;Sign Up&lt;/a&gt;
               &lt;/form&gt;
           &lt;/div&gt;
  
        &lt;/div&gt;
    &lt;/script&gt;
  
    &lt;script type="text/x-handlebars-template" id="loginPage"&gt;
        &lt;div&gt;
           &lt;div class="header"&gt;
               &lt;a href="#" class="btn"&gt;Back&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class="auth-wrapper"&gt;
  
  
               &lt;div class="logo"&gt;
                   &lt;img src="img/login/logo-landing.png"/&gt;
               &lt;/div&gt;
  
               &lt;form method="post" id="userSignIn"&gt;       
                   &lt;input class="form-control input-signin" type="text" name="useremail" placeholder="Email" id="userEmail"&gt; 
                   &lt;input class="form-control input-signin" type="password" name="userpass" placeholder="Password" id="userPassword"&gt;
                   &lt;a class="btn-to-auth btn-login js-btn-login"&gt;Log In&lt;/a&gt;
               &lt;/form&gt;
           &lt;/div&gt;
  
        &lt;/div&gt;
    &lt;/script&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>My Problem</strong>
  Upon clicking the a#signup-page or a#login-page links, I can see the url change to "localhost/#signup-page", but the view is not being rendered.</p>
  
  <p><strong>BUT</strong>
  When I refresh the page at localhost/#signup-page or localhost/#login-page, I see the views are rendered.</p>
  
  <p>Where am I going wrong?</p>