How to render a collection of different Marionette Views

问题

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,

回答1:

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.

来源：https://stackoverflow.com/questions/31460936/how-to-render-a-collection-of-different-marionette-views

标签

backbone.js

views

marionette

subviews