25
[EDIT: I solved earlier problem by calling delegateEvents(), but shouldn't have to. Re-posting w/more info.]
I have a View that when rendered has a login button on it with a click event attached. First render all works: click on button and upon successful ajax call the login prompts disappear and welcome view (LoggedInView) is displayed. But, if I navigate back to this View later (#foo) the UI renders but the event association is gone without manually forcing the issue by calling delegateEents().
What happened that my events didn't re-associate themselves?
LoginView = Backbone.View.extend({
template: _.template($("#loginTemplate").html()),
initialize: function(stuff,router) {
_.bindAll(this,'render','rc','gotProfile');
this.model.bind("rc",this.rc)
this.router = router;
},
events: {
'click .loginButton': 'login'
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
$(this.el).find(".actionButton").button(); // Button
// this.delegateEvents(this.events); // NEEDED! Re-wire events on re-render
return this;
},
rc: function(code) {
switch(code) {
case errCodes.USER_NOT_FOUND: this.notFound(); break;
case errCodes.OK: this.loginOk(); break;
default: this.otherErr(); break;
}
},
login: function() {
clearErrors( $('[rel="req"]') );
var okReq = validate( $('#login [rel="req"]'), validateReq );
var okEmail = validate( [$('#uid')], validateEmail );
if( okReq && okEmail ) {
this.model.set({'uid':$('#uid').val().trim(), 'pwd':$('#pwd').val().trim()});
this.model.fetch();
}
},
notFound: function() {
validate( [$('#uid'),$('#pwd')], function(){return[false,"Invalid user / password"]} );
},
otherErr: function() {
vali