MarionetteJS - Multiple nested side by side views - marionette

Question

I am looking at the example here http://davidsulc.github.io/backbone.marionette-nested-views/ it shows how you can create a list a superheroes and for each hero have an inner list of villains.
How would one extend this to not only list villains for each hero, but also their top three favorite colors? for example.
So I could have something like
Batman
-----------------------------------
Bane | Black
Ra's Al Ghul | Blue
The Joker | Orange
The Riddler |
===================================
Spiderman
-----------------------------------
Green Goblin | Red
Venom | Green
| Violet
===================================
Wonder Woman
-----------------------------------
Ares | Silver
Doctor Psycho | Purple
Silver Swan | White
===================================
In the composite view it is as if I need two sets of itemviews and itemcomtainers, something like
HeroView = Backbone.Marionette.CompositeView.extend({
template: "#accordion-group-template",
className: "accordion-group",
itemView: VillainView,
itemViewContainer: "#villainUL",
itemView2: FavoriteColorView,
itemViewContainer2: "#colorUL",
...
But of course such a thing doesn't exist.
Edit: this http://jsfiddle.net/derickbailey/AdWjU/ will probably serve as a solution, but I will have to wait until the morning to adapt it.

Answer 1

First of all, hopefully you're aware of the blog post I wrote to go with the code: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/
Bad news: I think you'll actually need more work to achieve what you want...
The jsFiddle you linked (http://jsfiddle.net/derickbailey/AdWjU/) displays a list of element that are sub-elements. What you want to do is display two separate lists!
Here's what I'd try: you need to replace the VillainView (which is an ItemView) with a layout which we'll call HeroInfo, in this layout you need to declare 2 regions (one for the villain list, the other for the colors). This new layout also won't be rendered within a ul so you can remove the itemViewContainer from the view definition and the template.
Note you might not be able to specify the layout regions as an object (you can't use ids in the template since they'll be repeated, and you might not yet have access to this.$el). If that's the case, you need to initialize them with something like this:
initialize: function(){
// assuming you have an element with class "js-villain-region" in your layout template
this.addRegion("villainRegion", this.$el.find(".js-villain-region").first());
}
Next, you need to define a VillainView and a ColorView (both are collection views) to be displayed in the layout's regions on the "show" event (see example code using a layout here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L43
I hope this helps to set you on the right path!
Also, as a side note: this seems to be more challenging than it looks at first glance. If you're doing this as a learning experience, don't get discouraged: you're attempting a challenging, complex view implementation, which will be tricky when first getting into Marionette.