3

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?

Michael Cordingley
  • 1,485
  • 1
  • 11
  • 23
  • 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 Mar 20 '13 at 17:10
  • 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 Mar 20 '13 at 17:52
  • 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 Mar 21 '13 at 15:08
  • So, create an onRender callback and in there create and render each collection view? – Michael Cordingley Mar 21 '13 at 16:56

2 Answers2

4

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/

David Sulc
  • 25,946
  • 3
  • 52
  • 54
  • This seems to cover the ordinary use of a composite view. To extend the example from the linked blog post, I want to display a City (that would be the ItemView portion of the CompositeView) and display two collections attached to that ItemView, as that City has a collection of Heroes and a collection of Villains. That is, two distinct collections. After doing a bunch of reading up and fiddling with code, it looks as if the best way is to use an ItemView for the City and place some code in the onRender callback for that City to create and render a Heroes CollectionView and another for Villains. – Michael Cordingley Mar 25 '13 at 22:12
0

Take a look at the CompositeView in Marionette. It might be more what you are looking for.

Marionette CompositeView documentation

Marionette CompositeView Article

Kalpers
  • 658
  • 5
  • 11