Using regions in a CompositeView for subview

Question

I'm using a CompositeView to create a grid of images that they had some events on it. This is how it looks like:

Backbone.Marionette.CompositeView.extend({

    events: {
        'click li.feed-thumb': 'clickElement',
    },

    template: _.template(template),

    itemView: ItemFeedView,
    itemViewContainer: "#feed ul.feed",

    clickElement: function(event) { 
        var profile = new ProfileFeedView();

    }
});

My template for this CompositeView contains a <li> element that will render the profile when I click on a image. I use the same <li> for all the events of click into a image. I would like to handle this as a region, because I understand that doing it as region Marionette will handle the opening and closing of the views.

I think CompositeView do not support a regions: {profileRegion: '#feed-profile'}, what's my options?

Thanks in advance!

Answer 1

You should use a Layout View in which you can specify as many regions as you want, so you can create a list region in which you can put your composite view and a profile region in which you can put a item view that will render the profile.

Marionette's docs -- Layout View

Answer 2

If for some reason you want to have regions in your CompositeView you can also do something like this:

var YourView = Backbone.Marionette.CompositeView.extend({
    regions: {
       "someRegion": ".someRegionClass"
    },
    "initialize": function(options) {
       this._initializeRegions(options);
    },
    "onDestroy": function() {
       this.regionManager.destroy();
    }
})
_.each(["_initializeRegions", "_initRegionManager",
        "_buildRegions", "addRegion", "addRegions",
        "removeRegion", "getRegion", "getRegions",
        "_reInitializeRegions", "getRegionManager"], function(prop) {
    PaginatorView.prototype[prop] = Marionette.LayoutView.prototype[prop];
});

To be honest, it works but i haven't tested it for full functionality.

view.someRegion.show(otherView) works.

(also works for other views i guess and you will have to add your other options needed to extend the view of course)