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, где вам это нужно и где это имеет смысл.