백본 : 다음 렌더링시 이벤트가 발생하지 않습니다.

Question

이 코드가 있습니다. 버튼을 클릭하면 몇 번만 작동합니다. Chrome은 버튼에 이벤트 리스너가 없다고 말합니다. 그러나보기는 버튼을 생성하고보기에는 클릭 이벤트가 발생합니다. 나 좀 도와 줄 수있어?

//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(); 
}); 
​ 

데모 : 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; 
},