Databases
StackOverflow2013
Postsdbo
PORender Backbone View on click (via Router push state)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORender Backbone View on click (via Router push state)
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload