How to render a collection of different Marionette Views

Question

I am trying to render a backbone collection of views. The collection could be any kind of marionette view ( layoutView, CompositeView, collectionView, ItemView). When I try and render, I get “[object Object]” for each view that renders. This leads me to believe that it doesn't know which view to render when it grabs one from the collection. I have now started using getChildView() in the CollectionView that is suppose to render the collection of Views but I am unsure how to specify the type of view I want the child to be.

New to Marionette and online resources seem to be slim (perhaps I am searching wrong??) I want to have Views within views ( sub views? not necessary children) but not have to use LayoutView and have to specify the regions since the number of subviews could vary, instead just have a collectionView render a collection of marionetteViews regardless of how many.

Thank you for you time,

I'm slightly confused about what you're trying to do. A CollectionView is usually used to render a collection of models using a specified View class but you keep mentioning a collection of views. What kind of views? Where do these views come from? What's the usecase? If you just have a lot of views you want to append to a DOM element there are better solution to that than using the CollectionView since that's meant for a different situation. — ivarni
Being new to marionette, I'm still tripping over what the framework can do! Instead of having a collection of of models, I was thinking of creating a backbone collection that stores multiple MarionetteViews. and then I wanted to have a collectionView use that collection of views to render multiple children. Use case would be a column that has multiple panels. Each panel has a banner and content. I would be creating these panels and then adding to a collection. Then I would use a collectionView/compositeView to go through the panel collection and render them all. — SegFaultDev
My apologizes if this question does not make sense at all. Still trying to get a firm grasp on what marionette's views are completely capable of! My research leads me to believe this is not possible, and I should be using Layouts instead, so I'v moved towards the layout show here ( another one of my questions) stackoverflow.com/questions/31465738/… — SegFaultDev

SegFaultDev SegFaultDev · Accepted Answer · 2015-07-22T16:32:50

So after a couple days of experimenting, completely leaving this approach for another(Does a CollectionView's childView have to be an ItemView?) and then returning to it. I feel as though I have figured it out.

This approach is for nesting multiple MarionetteView under a collection/composite view, so lets use an example of a Column that could have any number of panels

First we create a collection of views for the column

//These exist in the view...
class PanelView1 extends Marionette.CompositeView
...
class PanelView2 extends Marionette.ItemView
...


columnPanelCollection = new ColumnPanelCollection([
        index: 1,   view: PanelView1, data: dataForPanelView1Collection
    ,
        index: 2,   view: PanelView2 , data: null
    ])

So we create a collection for the column (columnPanelCollection ), passing the type, not instance, of the MarionetteView, so PanelView1 and PanelView2, into the 'view:' attribute. Also pass any data that view may need in a collection in the 'data': attribute

Now we put the collection we just created into a CollectionView

columnCollectionView= new ColumnCollectionView(
        collection: columnPanelCollection 
    )

in the ColumnCollectionView class, we use the callback

getChildView:(model)->
    return model.get('view')

and we return the 'view:' attribute which is the Type of View we want created, this will create a child view based on that type. Then in the childView's class (so PanelView1 or PanelView2 class) we can use the onShow callback and set up a collection for that view based on the 'data:' attribute we provided

class PanelView1 extends Marionette.CompositeView
...
template: ....
collection: new PanelDataCollection()

onShow:(view)->
    modelCollection = view.model.get("data").models 
    @collection.reset(modelCollection) if modelCollection

sidenote: a collection attribute must still be specified in the PanelView class, this is why I initialize it as a 'new PanelDataCollection()', and then set it onShow

We can then use a LayoutView and put the columnCollectionView into one of the regions and show it.

How to render a collection of different Marionette Views

1 Answers