BackboneJS Radio 频道多次触发事件

Question

我正在构建一个 Backbone.js 应用程序，我使用 BackboneJS Radio 进行消息传递。

首先我创建了一个频道：

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

当我点击操作按钮时，假设 'next' 操作按钮：

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。

BackboneJS Radio 频道多次触发事件

BackboneJS Radio channel triggers events more than once

javascript

backbone.js

backbone-events

✘ 不要这样做

✔ 这样做

最好的