0

我有一个足够简单的事件对象的视图（在咖啡脚本中，因为它很甜）

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 行有一个附加到我的“点击”字符串，它指示事件类型。该方法在使用下划线绑定之前读取为我的console.log方法，所以这是正确的。

最终结果是我的事件没有被触发。想知道我在这里搞错了什么。

4

1 回答 1

3

事件名称click.delegateEventsview8实际上是 jQuery 事件的正确值。Backbone 正在使用 jQuery 的命名空间事件功能。（你可以在这里阅读更多关于它的信息）

Backbone 使用命名空间事件，因此它可以轻松地取消绑定它在其undelegateEvents函数中添加的所有事件。通过使用命名空间，Backbone 可以确保它只取消绑定它添加的事件。这样它就不会取消绑定它没有添加的任何事件。

undelegateEvents : function() {
  $(this.el).unbind('.delegateEvents' + this.cid);
},

至于为什么没有触发事件，我不知道。

在模板被渲染到视图之后，尝试在您的渲染方法中手动添加一个单击事件，el然后查看它是否被调用。如果不是，那么您知道选择器有问题。

render: function() {
  $(this.el).append(//your template code)
  this.$('a').click(this.testFunction);
}
于 2011-12-31T12:32:38.847 回答