BackboneJS無線電頻道不止一次觸發事件

Question

我正在構建一個Backbone.js應用程序，我使用BackboneJS Radio進行消息傳遞。

首先，我創建了一個通道：

App.actionsChannel = Backbone.Radio.channel('actions'); 

，當我點擊了動作按鈕，讓我們說 '未來' 的動作按鈕：

App.actionsChannel.trigger('action:triggered', 'next'); 

我處理措施：

App.actionsChannel.on('action:triggered', function(actionName){ 
    //do some ajax requests 
}); 

問題是，當我第一次點擊下一個按鈕時，它會觸發next動作一次，第二次觸發兩次，第三次觸發4次，依此類推......

每當我觸發下一個動作時，它會多次觸發，而不是一次。當我檢查actionsChannel._events時，我發現它包含我所觸發的所有操作。

Answer 1

這是因爲註冊on多次完成，某處未顯示在您的問題中，而且應該只執行一次。

✘不要這樣做

var view = Backbone.View.extend({ 
    events: { 
     "click": "onClick" 
    }, 

    onClick: function(e) { 
     App.actionsChannel.on('action:triggered', function(actionName) { 
      //do some ajax requests 
     }); 
    } 
}); 

✔做這個

var view = Backbone.View.extend({ 
    events: { 
     "click": "onClick" 
    }, 

    initialize: function(){ 
     App.actionsChannel.on('action:triggered', this.onActionTriggered); 
    }, 

    onClick: function(e) { 
     // or if you must register it here for example. 
     // First make sure it's unregistered. 
     App.actionsChannel.off('action:triggered', this.onActionTriggered); 
     App.actionsChannel.on('action:triggered', this.onActionTriggered); 
    }, 

    onActionTriggered: function(actionName) { 
     //do some ajax requests 
    }, 
}); 

使用on功能多次只是增加了一個偵聽器添加到列表中。所以，當被觸發時，回調會被調用很多次，因爲它被註冊了。

最好

建議使用listenTo代替on儘可能避免內存泄漏。

Backbone.js on vs listenTo

var view = Backbone.View.extend({ 
    events: { 
     "click": "onClick" 
    }, 

    initialize: function(){ 
     // this will be removed automatically when the view is `remove`d, 
     // avoiding memory leaks. 
     this.listenTo(App.actionsChannel, 'action:triggered', this.onActionTriggered); 
    }, 

    onClick: function(e) { 

    }, 

    onActionTriggered: function(actionName) { 
     //do some ajax requests 
    }, 
}); 

上面的代碼片段都只是去傾聽一個事件的例子。在需要的地方使用trigger，以及它在何處有意義。