Backbone.js 및 JQueryUI 대화 상자 - 바인딩되지 않은 이벤트

Question

JQuery 대화 상자에서 Backbone.js를 사용하려고합니다. 대화를 렌더링하고 열어 볼 수있게되었지만 이벤트가 발생하지 않는 것 같습니다. 이를 확인하기 위해 테스트 이벤트를 추가했으며 클릭하면 예상 한 결과가 없습니다.

delegateEvent와 관련하여이 blogpost의 지침에 따라 시도했지만 별다른 차이는 없습니다. 오류가 발생하지 않으며 이벤트가 발생하지 않습니다. 왜 이런거야? .

Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend({ 
    events: { 
     "click .dialog-content": "clickTest" 
    }, 
    clickTest : function() { 
     alert("click"); 
    }, 
    render: function() { 
     var compiledTemplate = Handlebars.compile(this.template); 
     var renderedContent = compiledTemplate(); 

     var options = { 
      title: Slx.User.Language.dialog_title_new_message, 
      width: 500 
     }; 
     $(renderedContent).dialog(options); 
     this.el = $("#newBroadCastContainer"); 
     this.delegateEvents(this.events); 
     return this; 
    }, 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.template = $("#newBroadcastDialogTemplate").html(); 
     this.render(); 
    } 
}); 

Answer 1

당신은 시도 할 수도 있습니다 이. 나는 조금 당신이 생각

Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend({ 
    el:"#newBroadCastContainer", 
    template:$("#newBroadcastDialogTemplate").html(), 
    events: { 
     "click .dialog-content": "clickTest" 
    }, 
    clickTest : function() { 
     alert("click"); 
    }, 
    render: function() { 
     var compiledTemplate = Handlebars.compile(this.template); 
     var renderedContent = compiledTemplate(); 
     $(this.el).html(renderedContent).hide().dialog(this.options.dialogConfig);  
     return this; 
    }, 
    initialize: function() { 
    } 
}); 

인스턴스화를 얻을 내가 결합 할 수 있었다 코드베이스 중 하나에 두 개의 코드베이스를 가지고

var myDialog = new Slx.Dialogs.NewBroadcastDialog.View({dialogConfig:{title: Slx.User.Language.dialog_title_new_message,width: 500}}); 
myDialog.render(); 

Answer 2

이 문제는 내가이 할당되어 있어야합니다 때 this.el을 할당으로 인해 나에게로 판명 $ 엘

이것은 완벽하게 작동 :

Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend({ 
    el: "#newBroadcastContainer", 
    events: { 
     "click .clicktest": "clickTest" 
    }, 
    clickTest : function() { 
     console.log("click"); 
    }, 
    render: function() { 
     var compiledTemplate = Handlebars.compile(this.template); 
     var renderedContent = compiledTemplate(); 

     var options = { 
      title: Slx.User.Language.dialog_title_new_message, 
      width: 500 
     }; 

     this.$el = $(renderedContent).dialog(options); 
     return this; 
    }, 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.template = $("#newBroadcastDialogTemplate").html(); 
     this.render(); 
    } 
}); 

Answer 3

보기 정의 외부 렌더링 바랍니다 코드를 리팩토링했다 이벤트를 대화 상자에 할당하여 $ el하지만 다른 코드베이스에서는 어떻게 든 작동하지 않았습니다. 나는 다음 줄을 this.el = this. $ el;을 추가한다. 코드에 가 있으며 지금 작동 중입니다. 그러나 나는 여전히 왜 그것이 하나의 코드베이스에서 작동하고 다른 것은 작동하지 않는지, 왜 엘을 엘에게 할당하면 작동시킬 수 있는지 알 수 없다.