Backbone Marionette Event Aggregator : how to listen at the App level to ItemView Event

Question

I'm new to Marionette and can't get my head around events...

I have an ItemView which trigger an event, and I would like to receive this event at the application level, but when my app listen for this event, nothing happens...

If the Event Aggregator is in Application and ItemView, why this code doesn't work ? :

var MessageItemView = Backbone.Marionette.ItemView.extend({
  template: "#messagesTPL",
  tagName: 'tr',
  className: 'messageItem',
  events : {
    'click': 'displayMessage'
  },
  displayMessage: function () {
    this.trigger('display:message');
  }
});

App.on('display:message', function () {
  console.log('display message !!!');
});

Answer 1

If you want to listen for the event at the application level, you have to trigger it at the application level:

displayMessage: function () {
  myApp.trigger('display:message');
}

Assuming myApp is your Marionette application. Then, you simply listen for that event:

myApp.on('display:message', ...)

It's the only way to implement what you asked for: "I have an ItemView which trigger an event, and I would like to receive this event at the application level". Depending on your situation, the better way is to either

• use listenTo as Andrew suggested (see an example here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/config/marionette/regions/dialog.js). In the example, the dialog region listens to a "dialog:close" event triggered on the view, and reacts to it
• use a controller to listen to events on the view and react properly, as you can see here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L38 The controller reacts to a "contacts:filter" event that was triggered in the view, and reacts to it

Neither of these 2 solutions requires "polluting" the global event space.

Answer 2

ok so I tried the listenTo solution, here is part of my code:

var regionManager = Backbone.Marionette.Region.extend({
    el: "#messages",
    onShow: function (view) {
        this.listenTo(view, "display:message", this.displayMessage);
    },
    displayMessage: function () {
        console.log('regionManager received display:message');
    }
});
App.addRegions({
    messageListRegion: regionManager

});
var MessageItemView = Backbone.Marionette.ItemView.extend({
    template: "#messagesTPL",
    tagName: 'tr',
    className: 'messageItem',
    events : {
        'click': 'displayMessage'
    },
    displayMessage: function (e) {
        e.preventDefault();
        e.stopPropagation();
        this.trigger('display:message');
    }
});

But when I click on a messageItemView, the regionManager does not execute the displayMessage callback set in the listenTo method.