Passing Layouts (and manipulating regions) through CollectionView (Marionette / Backbone)

Question

I'm trying to pass a layout into a CollectionView, and then manipulate the regions inside of it.

Right now, I'm successfully sending a layout into the CollectionView (which is in it's own region) like so:

main_layout.main_region.show(new CollectionView({
   itemView: ALayout,
   collection : someCollection
}));

I then can see that the layout is getting rendered. However, I can't figure out a way to modify (or even touch) the regions in 'ALayout'. Is there a way to do this? In the end, I'm trying to get a collection of 'panes' with a layout inside each one that has the same regions, and paint those regions somehow.

In addition, I was originally just passing an ItemView into the CollectionView, but I could figure out a way to add regions into that ItemView. If possible, I would like to control these regions in the file I pass it (be it a Layout or an ItemView).

Does anyone have any experience with this?

---

Edit: Okay, so I found a hint with using the Backbone.BabySitter that comes with Marionette -- from this documentation that talks about CollectionView's children here. So now my code looks like this.

var collectionViewToUse = new CollectionView({
    itemView: ALayout,
    collection : someCollection
});

main_layout.main_region.show(collectionViewToUse);

collectionViewToUse.children.each(function(view) {
  console.log(view);
  //This fails.
  view.regionManagers.someRegion.show('HHHHHH');
  //So does this, if I run it instead
  view.someRegion.show('Anything');
});

The backbone view instance is getting logged, so I think I'm on to something here. Can anyone tell me how to manipulate the regions from this step?

Answer 1

Okay, I think I have the answer to this issue. Hopefully this helps someone else in the future!

The answer was down the path of using BabySitter. You bascially instantiate a CollectionView, then use BabySitter to loop through it and do something to each view. So if you pass it a layout:

var collectionViewToUse = new CollectionView({
    itemView: ALayout,
    collection : someCollection
});

main_layout.main_region.show(collectionViewToUse);

collectionViewToUse.children.each(function(view) {
   view.someRegion.show(new SomeView({model : view.model });
});

So basically, you can pass Collection view a Layout instead of an ItemView, then loop through the 'views' and pass new views into the regions.

Please comment with any improvements or if this was of any help to anyone else!