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 
}); 

まず私はチャンネルを作成しました

問題は、次のボタンを初めてクリックすると、がトリガーされることですアクションは1回、2回目は2回、3回目は4回トリガします。

次回のアクションをトリガするたびに、一度ではなく何度も起動します。私がactionsChannel._eventsをチェックしたとき、私はトリガされたすべてのアクションが含まれていることがわかりました。

Answer 1

登録番号onが複数回実行されているため、あなたの質問に表示されていない部分があり、一度だけ行う必要があります。

は✘on機能を複数回使用して、この

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 
    }, 
}); 

は単なるリストに別のリスナーを追加してください✔

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

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

にこの

をしないでください。したがって、トリガされると、コールバックは登録された回数だけ呼び出されます。

最高

メモリリークを回避するために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を使用してください。必要な場所と意味が分かります。