backbone marionette event dispatching

Question

I'm jumping head first into backbone, marionette, underscore and require for this project. I just watched a great video where the speaker explained one benefit of marionette was the ability to have an application object delegate event listeners and triggers, so that your code could be truly modular.

If this is actually possible, I'm not getting it right, and I'm having a hard time finding any examples online, I imagine since it's a relatively young library.

Here's a pared down example of what I'm trying to accomplish:

var App = new Marionette.Application();
App.start();

var NavBar = Backbone.View.extend({
    el: '#nav',

    initialize: function () {},
    events: {
        'click': 'fireOff'
    },

    fireOff: function () {
        App.vent.trigger('trigger');
    }

});

var NavBar = new NavBarView({});

App.vent.on('trigger', function () {
    alert('something');
});

What I would expect to happen here, is that when I click anywhere in #nav, I get the alert. Now, I'm aware that I didn't pass objects properly, but that's part of my confusion. I think I should be using a marionette extended view instead of a backbone view.

So my basic question is, how do I write modules in a backbone / marionette application so that individual views can advertise events, which would then be dispatched by a 'master' application object to a module which is listening for that event?

Answer 1

Try using a Marionette view:

var NavBar = Marionette.ItemView.extend({
  // ...
});

(Also, you'll need to display the view at some point.)

You can also see an example of that in the code that goes with my book on Marionette:

• the view triggers an event here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/common/views.js#L12
• which is caught and propagated here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/edit/edit_controller.js#L19

You can see the app in action at http://davidsulc.github.io/marionette-gentle-introduction/#contacts