将"on"模式转换为 Backbone 的"事件"哈希

Question

在我的主干视图中，在initialize函数中，我做的事情如下:

initialize: function () {
    $(this.el).on('click', '.button', function () {
        $(this).fadeTo(0.5);
    }
}

这似乎违背了Backbone使用events的惯例。用events哈希重写:

events: { 'click .button': 'fadeButton' },
fadeButton: function () {
    $(this).fadeTo(0.5);
}

问题是在fadeButton的范围内，this的值与使用.on()时的值不相同。使用events哈希的正确方法是什么?

Answer 1

就像paul说的，Backbone会自动将事件回调的上下文设置为视图本身。所以回调中的this将是视图实例。

所以你可以通过使用视图的作用域选择器函数得到你想要的效果…

events: { 
  'click .button': 'fadeButton' 
},
fadeButton: function () {
  this.$('.button').fadeTo(0.5);
}

…但是如果你的视图中有多个"button"类的元素，那就会让所有的元素淡出，在这种情况下，你可以使用jQuery提供的事件对象来获取事件目标:

fadeButton: function (event) {
  $(event.target).fadeTo(0.5);
}

Answer 2

您正确定义了事件散列。

对于定义的每个事件处理程序，Backbone会自动将上下文设置为视图。因此，fadeButton中的this是视图，您将希望访问视图的元素。

下面的代码显示了如何更新fadeButton函数。

fadeButton: function () {
  $(this.el).fadeTo(0.5);
}