Transferring layouts (and manipulating regions) via CollectionView (Marionette / Backbone)

Question

I am trying to pass a layout to a CollectionView and then manipulate its interior areas.

Now I am successfully sending the layout to the CollectionView (which is in its own region) like this:

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

Then I see that the layout gets rendered. However, I cannot find a way to change (or even touch) the regions in "ALayout". Is there any way to do this? In the end, I'm trying to get a collection of “panels” with a layout inside each of them that has the same regions, and somehow draws these regions.

Also, I initially just passed the ItemView to the CollectionView, but I could find a way to add regions to this ItemView. If possible, I would like to manage these regions in the file that I transferred (whether it be a layout or an ItemView).

Does anyone have any experience?

---

Edit: Okay, so I found a hint using the Backbone.BabySitter that comes with Marionette - from this documentation that talks about CollectionView 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 instance of the trunk is being registered, so I think I'm here for something here. Can someone tell me how to manipulate regions from this step?

Answer 1

Well, I think I have an answer to this question. Hope this helps someone else in the future!

The answer was towards using BabySitter. You basically create a CollectionView instance and then use BabySitter to scroll through it and do something for each view. Therefore, if you pass the layout to it:

 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 }); }); 

Basically, you can pass a Collection view Layout instead of an ItemView, then scroll through the "views" and transfer the new views to the area.

Comment with any improvements, or if that helps someone else!

Answer 2

I found a slight modification to this template, encapsulating the logic inside the collection itself, and then changing it from the outside.

 var collectionViewToUse = new CollectionView({ itemView: ALayout, collection : someCollection, onBeforeItemAdded: function(view) { view.on('show', function() { view.someRegion.show( new SomeView({ model : view.model // view.model is model of Layout }) ); }); } }); main_layout.main_region.show(collectionViewToUse); 

All answers received suffer from binding the model to the Layout , while the model only needs to be passed to one of the subviews.