Backbone listenTo不會作爲處理程序觸發jquery函數

Question

Backbone的事件系統有問題。

是否有可能直接將jquery函數作爲回調函數傳遞？

下面的代碼不會火災顯示/隱藏方法：

initialize: function() { 
    this.render(); 
    this.logoutButton = $('#logout-button'); 
    this.logoutButton.hide(); 
    this.listenTo(this.model, 'loginSuccessEvent', this.logoutButton.show); 
    this.listenTo(this.model, 'logoutSuccessEvent', this.logoutButton.hide); 
}, 

但如果我把它改成這樣，它完美的作品：

initialize: function() { 
    this.render(); 
    this.logoutButton = $('#logout-button'); 
    this.logoutButton.hide(); 
    this.listenTo(this.model, 'loginSuccessEvent', this.showButton); 
    this.listenTo(this.model, 'logoutSuccessEvent', this.hideButton); 
}, 

showButton: function() { 
    this.logoutButton.show(); 
}, 

hideButton: function() { 
    this.logoutButton.hide(); 
} 

Answer 1

從fine manual：

listenToobject.listenTo(other, event, callback)
[...]
callback將始終以object作爲上下文進行調用。

所以，當你這樣說：

this.listenTo(this.model, 'loginSuccessEvent', this.logoutButton.show); 

你真的說：

var show = this.logoutButton.show; 
this.listenTo(this.model, 'loginSuccessEvent', show); 

然後骨幹將調用show或多或少是這樣的：

your_view.show(arg, ...); 
// Or internally: 
show.apply(your_view, arguments); 

所以show（wh ich is jQuery's show）被調用，其this將成爲您的視圖而不是logoutButton。請記住，在一個JavaScript函數中，this取決於函數如何被調用，而不是它被定義的位置（當然除了綁定函數）。

你有一些選擇：

1. 使用您的showButton和hideButton功能。

2. 可以使用匿名函數：

   this.listenTo(this.model, 'loginSuccessEvent', function() { 
       this.logoutButton.show(); 
   }); 
   

3. 使用bound function：

   this.listenTo(this.model, 'loginSuccessEvent', this.logoutButton.show.bind(this.logoutButton)); 
   

   小心一點，雖然，show將與參數調用該listenTo通常會使用，所以你可能需要爲bind提供更多參數以避免令show和hide與他們不期望的參數混淆。