Javascript 注册事件处理程序的基本主干问题
我真的不明白主干网应该如何处理在HTML插入DOM之前要在HTML上注册事件处理程序的常见场景 大多数主干视图如下所示:Javascript 注册事件处理程序的基本主干问题,javascript,jquery,dom,backbone.js,Javascript,Jquery,Dom,Backbone.js,我真的不明白主干网应该如何处理在HTML插入DOM之前要在HTML上注册事件处理程序的常见场景 大多数主干视图如下所示: var PortalView = Backbone.View.extend({ events: { 'click #logout-li-id': 'onClickLogout' //1 (doesn't work) }, initialize: function (opts) {
var PortalView = Backbone.View.extend({
events: {
'click #logout-li-id': 'onClickLogout' //1 (doesn't work)
},
initialize: function (opts) {
var self = this;
$('#logout-li-id').on('click', function (event) { //2 (doesn't work because '#logout-li-id' is not in the DOM yet
event.preventDefault();
alert(event);
});
},
render: function () {
var self = this;
var template = allTemplates['templates/portalTemplate.ejs'];
var ret = EJS.render(template, {});
$('#main-div-id').html(ret);
$('#logout-li-id').on('click', function (event) { //3 works!
event.preventDefault();
alert(event);
});
return this;
},
onClickLogout: function(event){
alert(event);
}
});
正如您在上面所看到的,我已经标记了3个类似的调用来在DOM元素上注册事件处理程序“#logout li id”-问题是,在DOM元素上注册回调的唯一成功调用是在呈现函数(调用#3)中,这是在将此主干视图的el插入DOM之后发生的。因此,在主干视图的events对象中声明密钥的标准方法不起作用!那么用主干网做这件事的正确方法是什么呢?主干网希望视图通过
事件散列处理的事件是视图的el
的子元素(即视图的根DOM元素)。看起来您可能没有将此视图附加到您正在侦听的DOM元素的父级-是否$('#main div id')
视图的el
的子级
这里的标准方法类似于:
var PortalView = Backbone.View.extend({
// Associate this view with the element it will manage
el: '#main-div-id',
events: {
'click #logout-li-id': 'onClickLogout'
},
render: function () {
var template = allTemplates['templates/portalTemplate.ejs'];
var ret = EJS.render(template, {});
// Render to this view's element
this.$el.html(ret);
}
});
更多详细信息:events
哈希通过向视图的DOM节点添加委托事件处理程序来工作。本质上,视图DOM树中的每次单击都将调用一个处理程序,该处理程序将检查事件目标是否与给定的选择器匹配。如果是,它会将事件传递给指定的视图方法。但这仅在您单击的元素位于视图的DOM树中时有效,否则,视图的DOM将永远不会获取事件,也永远不会调用事件处理程序。谢谢,我想知道是否可以调用渲染函数底部的类似“this.delegateEvents()”的内容?我只需要一个主干函数,在我将模板呈现给DOM之后注册事件。理论上,调用this.delegateEvents()可以实现我想要的行为,但我不确定它是否真的可以实现,因为主干添加到DOM后不需要注册,所以委派事件由视图的el
处理,并且可以注册,而不管它是否在DOM中。如果您试图绑定到视图的el
之外的某个对象,那么您是做错了。是的,我不认为我做的是错的。我想要附加侦听器的元素位于这个特定视图的模板中,在本例中为portalTemplate.ejs。这是正常的。我认为主干可能希望视图上有一个模板属性,而不是在呈现函数中解析模板。换句话说,注销li id在portalTemplate.ejs的html中