Rendering Multiple Collections into Region with Backbone Marionette

Question

I've just started trying out Marionette after building a couple of vanilla Backbone applications. Right out of the gate I'm running into some questions with region management and multiple collections.

I have the following nested Model and Collection structure

FoosCollection
   FooModel
      BarsCollection
         BarModel

I want to take advantage of all the great views and layout/region managers that Marionette provides. However, I need to render this information on the page in a bit of a unique way. My HTML looks like this:

<div id="container">
     <div id="foos-description"></div>
     <div id="bars-list"></div>
</div>

Basically, some high level information from each of the FooModels needs to be rendered into the foos-description element. Then, each BarsCollection needs to be rendered into the bars-list. The structure needs to be such that the list is directly below the corresponding information in the foos-description container.

So, I would love to use CompositeViews to solve this, but it looks like the View/DOM element structure also needs to be nested in the same way that the collection/model structure is nested, which won't work in my case.

I've also added two Regions

App.addRegions({
  foosDescription: "#foos-description",
  barsList: "#bars-list"
});

My initializer code looks like this

App.addInitializer(function (options) {
    App.foosCollection = new FoosCollection(options.foos, {bars: options.bars});
    App.foosDescription.show(new FoosView({collection: App.foosCollection}));
    App.foosCollection.each(function(f) {
        app.barsList.show(new BarsView({collection: f.barsCollection}));
    })

});

Obviously this will only show the last BarsCollection in the barsList region, but I'm unsure of how I should structure this such that each collection is appended to the region. Any help would be greatly appreciated.

pdoherty926 pdoherty926 · Accepted Answer · 2014-04-21T19:09:51

You'll need to show the view in the region:

// tweaked region and view names for clarification
App.foosDescriptionRegion.show(foosDescriptionView);

Rendering Multiple Collections into Region with Backbone Marionette

1 Answers