7

Backbone 0.9.0 更新日志说：

视图的事件哈希现在还可以包含直接函数值以及现有视图方法的字符串名称。

当我尝试以下操作时，它失败了，说事件的值是undefined.

var BB = Backbone.View.extend({
  'initialize': function() {

    this.$el.html('<input type="button" value="Click me!" />');
    jQuery('body').html(this.el);
  },

  'events': {
    'click input[type="button"]': this.buttonClicked
  },

  'buttonClicked': function() {
    alert('button clicked!');
  }

});

window.b = new BB()

我误解了新功能吗？有人可以解释它的工作方式与我预期的不同吗？也许这只是我在定义时的 JavaScript 语法/“this”值，这很糟糕。

我习惯的方式仍然有效：

'events': {
  'click input[type="button"]': 'buttonClicked'
},
4

1 回答 1

14

当 JavaScript 解析器到达这里时：

'events': {
  'click input[type="button"]': this.buttonClicked
},

this可能window，而不是BB您期望的实例。该window对象没有buttonClicked属性（至少在您的情况下没有），因此您实际上是在说：

'events': {
  'click input[type="button"]': undefined
},

这就是你的错误。

如果您查看 的源代码delegateEvents，您会看到 ChangeLog 的含义：

delegateEvents: function(events) {
  // ...
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[events[key]];
    // ...
  }
},

那个_.isFunction电话是你感兴趣的。这意味着你可以这样说：

events: {
  'click input[type="button"]': function() { alert('pancakes!') },
  'click button': some_function_that_is_in_scope
}

因此，您可以将定义的函数（如果它们可访问，则通过它们的名称或作为函数文字）放入events查找表中。

于 2012-02-02T19:27:11.973 回答