Creating A Layout That Accepts A Variable Number Of Views (and Hence Regions)

My goal I need to create a custom layout (a flow layout) that can receive a variable numbers of views and based on them, it creates regions as necessary and within those regions it

Solution 1:

Maybe I'm not fully followed, but I can't see any reason a collectionView can't be used in this case.

The child views are all in same pattern, having data-region='flow-region-", and even have index. This is an obvious pattern of collection and its view.

With collectionView you can do things similar, adding/removing child views, fully reset, close etc.

If this is the case I would definitely recommend to use CollectionView or CompositeView, instead of overriding Region here.

Update

1. About why removing a model will cause removing view.

   Because Marionette CollectionView has such listener in constructor:

   this.listenTo(this.collection, "remove", this.removeItemView, this);
   

2. Add region in runtime.

   It's totally legit though I have not done that before. Layout has prototype method addRegion(name, definition), so any instance of layout should be able to add/remove region/regions in runtime. The usage would be like this:

   foo_layout.addRegion({region1: '#region-1'});