我有一个视图,其中包含一个足够简单的events对象(在coffeescript中,因为它很可爱)
APP.bb.Recipe_Index = Backbone.View.extend
template: JST['templates/Recipe_Index']
el: $ "#recipes"
events:
'click a' : 'testFunction'
testFunction: () ->
console.log 'test called'
return 'this function'
我的事件没有绑定。当我看到未缩小的0.5.3 Backbone.js文件中的第967行时
delegateEvents : function(events) {
//snip
for (var key in events) {
var method = this[events[key]];
if (!method) throw new Error('Event "' + events[key] + '" does not exist');
var match = key.match(eventSplitter);
var eventName = match[1], selector = match[2];
method = _.bind(method, this);
eventName += '.delegateEvents' + this.cid;
if (selector === '') {
$(this.el).bind(eventName, method);
} else {
$(this.el).delegate(selector, eventName, method); <-- THIS ONE
}
}
},
当我在Chrome中设置了断点时,它以不正确的jQuery语法结束:
selector == 'a'
eventName == click.delegateEventsview8'
method == 'function() {[native code]}'
选择器是正确的,但是我不确定为什么在第963行有一个附加到我的'click'字符串上的指示事件类型的内容。该方法在用下划线绑定之前读作我的console.log
方法,所以这是正确的。
最后的结果是我的事件没有被触发。想知道我在这里接错了什么。
1条答案
按热度按时间68bkxrlz1#
事件名称
click.delegateEventsview8
实际上是jQuery事件的正确值。 Backbone.js 正在使用jQuery的命名空间事件功能。(You can read more about it here)Backbone使用命名空间事件,因此它可以很容易地取消绑定所有添加到
undelegateEvents
函数中的事件。通过使用命名空间,Backbone可以确保它只取消绑定它添加的事件。这样它就不会取消绑定任何它没有添加的事件。至于为什么没有触发,我不知道。
在模板被呈现到视图的
el
之后,尝试在render方法中手动添加一个click事件,看看它是否被调用,如果没有,那么你就知道选择器出了问题。