翻譯`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); 
}