Marionette vent workflow

Here are some notes on useful workflows when using the Backbone Marionette vent event manager.

Group page-wide events

When working in a modular way you may find you are writing the same event handler code in many different places:

$('window').on('resize', function () {
    // Do some resize code here
});

Instead of repeating this same window binding many times you can bind just once to the jQuery event and then make use of event triggers in each of your modules to run different code:

app.js

// Bind to jQuery events e.g. Window resize event
$('window').on('resize', function () {
    vent.trigger('window:resize');
});

childModuleA.js

this.listenTo('vent' 'window:resize', handleResizeFunction);
...
function handleResizeFunction () {
    // Do a thing on resize
});

childModuleB.js

this.listenTo('vent' 'window:resize', handleResizeDifferentlyFunction);
...
function handleResizeDifferentlyFunction () {
    // Do something else on resize here
});

I find this a useful way of grouping quite standard functionality together. You can apply the same principle to all kinds of other events.