Capturing events from nested CompositeViews in Backbone.Marionette

Question

Aaaargh I found a solution already... Scroll to the bottom to view.

I'm having an issue with Backbone Marionette which I can't seem to find a solution for.

I have built a nested view structure to show an accordion view like used in Twitter Bootstrap which consists of an outer CompositeView (Accordion outer), which has its ItemView set to another CompositeView (Accordion group), which in turn has its ItemView set to an ItemView (Accordion group item). It shows and functions fine. This is a simplified copy of the source (I have an abstract accordion view somewhere else in my application, but this is just to get an idea of the structure):

The outer accordion:

    // Marionette CompositeView 
    Accordion.View = app.Common.View.Component.Accordion.View.extend({
        tagName : 'div',
        className : 'accordion',
        itemViewContainer : 'div.accordion-groups',
        template: '#accordion_template',
        itemView : Accordion.ViewGroup,
        emptyView : Accordion.ViewEmpty
    });

Views to show per accordion group:

    // Marionette CompositeView 
    Accordion.ViewGroup = app.Common.View.Component.Accordion.ViewGroup.extend({
        tagName : 'div',
        className : 'accordion-group',
        itemViewContainer : 'ul',
        template: '#accordion_template_group',
        itemView : Accordion.ViewGroupItem,
        emptyView : Accordion.ViewGroupEmpty
    });

    // Marionette ItemView  
    Accordion.ViewEmpty = app.Common.View.Component.Accordion.ViewEmpty.extend({
        template: '#accordion_template_empty'
    });

Items to show within a group:

    // Marionette ItemView  
    Accordion.ViewGroupItem = app.Common.View.Component.Accordion.ViewGroupItem.extend({
        triggers : {
            'mouseover' : 'mouseover'
        },
        template: '#accordion_template_group_item',
        tagName : 'li'
    });

    // Marionette ItemView  
    Accordion.ViewGroupEmpty = app.Common.View.Component.Accordion.ViewGroupEmpty.extend({
        template: '#accordion_template_group_empty',
        tagName : 'li'
    });

Hovering the mouse over an accordion item in a group, results in a trigger being fired named mouseover on the lowest level, itemview:mouseover in the middle CompositeView and itemview:itemview:mouseover on the outer CompositeView. These are not particularly descriptive to what is happening so I'd like to change the trigger name. To me it looks simple to do, but I just can't get it done properly and I have the feeling I'm overlooking something.

What I want to achieve is the following. When an event is triggered within the most deeply nested ItemView, for example 'mouseover' as shown above I would like to have the most outer CompositeView fire a trigger e.g. named group:item:mousover with the model as data. In this case, if I nest the accordion view under another view, it will have a more significant name.

Hope any of you can help. Thanks!

--

Solution for now:

    Accordion.View = app.Common.View.Component.Accordion.View.extend({
        tagName : 'div',
        className : 'accordion',
        itemViewContainer : 'div.accordion-groups',
        template: 'common/view/entitycomponent/set/accordion/accordion_template',
        itemView : Accordion.ViewGroup,
        emptyView : Accordion.ViewEmpty,

        // I've added the following
        onCompositeRendered : function() {
            this.on('itemview:itemview:mouseover',function(view) {
                this.trigger('group:item:mouseover',view);
            });
        }
    });

David Sulc David Sulc · Accepted Answer · 2013-08-27T09:41:44

You bascially have 2 options:

trigger the "group:item:mousover" event in your code when you listen for "itemview:itemview:mouseover"
rename the itemViewEventPrefix in your composite views (see https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-itemvieweventprefix): set the intermediate composite view to use "item", and the outer composite view to use "group". Then, the outer composite view should get a "group:item:mousover" event on mouseover

Capturing events from nested CompositeViews in Backbone.Marionette

1 Answers