Rendering a Collection with Multiple Sub Collections

Question

I'm trying to convert an application to Backbone Marionette and am running into a problem rendering a collection of items that each contains multiple sub collections.

The Background:

I am working on an address book app, mostly for my own edification but also hopefully of use to others. The main screen in this app displays a list of the user's contacts. Each of those contacts is represented by a view with a single model backing it. Each of those models has additional relational information stored as a collection on a property on the model. That is, phone numbers and email addresses are each stored as a collection on each contact. These relations are all back by Backbone Relational and It Is Good.

The Problem:

My first thought when attempting to convert the contact view from Backbone.View to Marionette was to use Backbone.Marionette.CompositeView, but the composite view only takes a single collection. What is the Right Way to render a repeating item that has multiple collections to it?

Do they really need to be collections? That approach sounds a little over-engineered. Is there an API end point for phone numbers? Are they actually storing Backbone Models or just Javascript primitives? — Andrew Kirkegaard
They are actually Backbone Models. There's additional information on each one, else they'd just be fields directly on the parent model. I'm sure that what's needed is more of an adjustment in my way of thinking of how to use Marionette. — Michael Cordingley
The CompositeView won't work for the reason you gave, but you could easily make an ItemView that manages multiple CollectionView instances. That's basically what a CompositeView does. — Andrew Kirkegaard
So, create an onRender callback and in there create and render each collection view? — Michael Cordingley

David Sulc David Sulc · Accepted Answer · 2013-03-25T10:33:55

I wrote a blog post on a similar problem. The key is to use a composite view to render the collection, and give it another composite view as the "itemView" property to render the nested collection.

Working code : http://davidsulc.github.com/backbone.marionette-nested-views/

Blog post : http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

Code repo : https://github.com/davidsulc/backbone.marionette-nested-views

Note : you can also see Derick's blog psot on nested views http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

Rendering a Collection with Multiple Sub Collections

2 Answers