翻译`on`模式骨干`event`哈希

Question

在我的骨干观点，在initialize功能我做的东西，如：

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

这似乎违背使用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会自动将该上下文设置为该视图。所以this内的fadeButton是视图，你会想要访问视图的元素。

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

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