Магистраль: события не срабатывают при следующем рендере

Question

У меня есть код вроде этого. Я нажимаю на кнопку, и она работает только несколько раз. Chrome не говорит о прослушивании событий на кнопке. Но View создает кнопку, а View имеет событие click. Вы можете мне помочь?

//buttons view 
var NavigateBar = Backbone.View.extend({  
    events : { 
     'click button#back' : 'onBack', 
     'click button#next' : 'onNext', 
     'hover' : function() {console.log('hover on navigate')} 
    }, 
    initialize: function(options) { 
//buttons html 
     this.backDiv = '<button id="back" class="btn btn-primary btn-large pull-left">Back</button>'; 
     this.nextDiv = '<button id="next" class="btn btn-primary btn-large pull-right">Next</button>'; 
//save options 
     this.back = this.options.back; 
     this.next = this.options.next; 
    }, 
//buttons event 
    onBack : function(e) { 
     e.preventDefault(); 
     app.navigate(this.back, {trigger: true}); 
    }, 
    onNext : function(e) { 
     e.preventDefault(); 
     app.navigate(this.next, {trigger: true}); 
    }, 
//render 
    render: function() { 
     this.$el.html(""); 
     this.$el.append(this.backDiv); 
     this.$el.append(this.nextDiv); 
     return this; 
    } 
    }); 

//create router class 
    var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "" : 'home', 
     ":id" : 'test' 
    }, 
//create different views 
    initialize:function() {   
     this.homeView = new NavigateBar({ 
//pass options to view 
      back: "1", 
      next: "2" 
     }); 
     this.testView = new NavigateBar({ 
      back: "3", 
      next: "" 
     }); 
    }, 
//route actions 
    home : function() { 
     $('#view-goes-here').html(this.homeView.render().el); 
    }, 
    test : function(e) { 
     $('#view-goes-here').html(this.testView.render().el); 
    } 
}); 

//create app 
$(function(){ 
    app = new AppRouter(); 
    Backbone.history.start(); 
}); 
​ 

Demo: http://jsfiddle.net/3Jaru/3/, нажмите дважды на следующую кнопку, и вы увидите

Answer 1

Вы держите ссылку на взгляд живой, который вызывает проблемы, так что, когда JQuery пытается пересвязать события она не Сделай так. Как правило, я не определяю ссылку на представление в методе initialize всегда, всегда вне его, чтобы я мог убедиться, что он будет перезаписан, когда родительский метод запрашивает новый экземпляр представления.

home: function() { 
    view = new NavigateBar({ 
     back: "1", 
     next: "2" 
    }); 
    $('#view-goes-here').html(view.render().el); 
    // and if you really want to be able to reference it 
    this.homeView = view; 
}, 
test: function (e) { 
    view = new NavigateBar({ 
     back: "3", 
     next: "" 
    }); 
    $('#view-goes-here').html(view.render().el); 
    // and if you really want to be able to reference it 
    this.homeView = view; 
} 

лучший подход должен всегда убедиться, что если есть вид определен, чтобы уничтожить его, так что

home: function() { 
    /* create a method on the NavigateBar view to clear anything 
    * that needs clearing, such as model binds or funky events 
    */ 
    this.homeView && this.homeview.destroy(); 
    view = new NavigateBar({ 
     back: "1", 
     next: "2" 
    }); 
    $('#view-goes-here').html(view.render().el); 
    this.homeView = view; 
},