I’m trying to make a small app that uses Backbone to render views for

Question

0

Asked: June 18, 20262026-06-18T14:46:31+00:00 2026-06-18T14:46:31+00:00

I’m trying to make a small app that uses Backbone to render views for

0

I’m trying to make a small app that uses Backbone to render views for user authentication. Here’s a fiddle demo http://jsfiddle.net/mjmitche/RRXnK/182/

Upon initialization, three links appear in the div “span6 authentication,” put there by the AuthView.

<div class="span6 authentication">
    <div class="row authentication">
    <a href="#login" id="login" data-toggle="tab" data-content="login">Login</a>
    <a href="#signup" id="signup" data-toggle="tab" data-content="signup">Sign up</a>
    <a href="#retrieve-password" id="retrievePassword" data-toggle="tab" data-content="retrievePassword">Retrieve password</a>      
</div> 
<div class="content" id="auth-content">I want the sign up view to appear in this div if I click on the Sign Up link</div>
</div>

There are three click events set up in the AuthView

 events: {
      'click  .row.authentication a#login': 'login',
      'click  .row.authentication a#signup': 'signup',
      'click  .row.authentication a#retrievePassword': 'retrieve'
  },

If I click signup, for example, (as in the fiddle), it creates the RegistrationView and tries to put in the #auth-content div

 signup: function(){
        alert("from signup method of auth view");
        var signUpView = new UserRegistrationView({model : this.model}).render().el;
        alert(signUpView);
      $('#auth-content').html(signUpView); 
    },

However, it’s not working. The second alert, as you can see in the fiddle, is not getting triggered. This is the registration view.

var UserRegistrationView = Backbone.View.extend({

    initialize:function () {
      _.templateSettings = {
        interpolate : /\{\{=(.+?)\}\}/g,
        escape : /\{\{-(.+?)\}\}/g,
        evaluate: /\{\{(.+?)\}\}/g
    };
        var template = $('#signup_template').html();
        this.template = _.template(template);


    }, 
    render: function(){
        alert("render of Registration View");
        $(this.el).html(this.template());
    }

})

Can anyone point out what the problem might be with this set up. For what it’s worth, JSHint says the code is valid.