WIP Reimagining Region

[paulfalgout]

This is a breaking WIP.. And it is a long way out.. just wanted to start the conversation.

Essentially the main idea will be to reduce the region API a lot. Much of that is possible by changes to the region mixin..

The next steps possibly will be to modify the region mixin so that regions are instantiated with an el at the moment getRegion is used instead of at view instantiation. Then instead of resetting regions we can destroy and re-instantiate them on render.

And further we'll possibly be able to detach the views within the regions.. we can attempt to recreate known regions after render and reattach views.

This would also allow for further abstraction of regions where we could allow for this.showChildView(this.ui.someRegion, myView); or even this.showChildView('.some-selector', myView);

[rafde]

Regionifying CollectionView not part of this? I am seeing more implicit region related issues with using regions as a way to append to rather than remove.

It seems like people (maybe) want to do, aside from showChildView, is a setChildView('region', view')
where the contents are kept but the region is used as the view's el.
The issue with this is: How does empty work?

This would also allow for further abstraction of regions where we could allow for this.showChildView(this.ui.someRegion, myView); or even this.showChildView('.some-selector', myView);

I think we can do this now if we allow showChildView to check regions has first, then the hash value if it's defined, otherwise assume it's a selector/DOM/jQuery

but the issue with that is: how do I get the a region's view?

[paulfalgout]

where the contents are kept but the region is used as the view's el.

I think that is just showChildView('region', myView, { replaceElement: true }); ?

[rafde]

replaceChild is https://github.com/marionettejs/backbone.marionette/blob/master/src/region.js#L184
So the region's el gets replaced by the view's el
set is more like

new View({
  el: this.getRegion('region').el
});

Which is similar to how I (maybe?) solved for #3150 (comment)

[paulfalgout]

I guess I just don't know why you'd want to set the region's el as the view's el. It seems backwards if it is the life-cycle container. I think it's still just replaceElement where the region and view are init'd with the same el. If you want to attach pre-existing DOM to a view I'd think you'd do it like this:

MyView.extend({
  ui: {
    foo: '.some-selector'
  },
  regions: {
    region: '@ui.foo'
  },
  onRender(){
    const myChild = new Mn.View({ el: this.ui.foo });
    this.showChildView('region', myChild, {replaceElement: true}); 
  }
});

[rafde]

The way I defined it preserves the contents. example

<table data-ui="table">
  <thead>
    <!-- don't remove me, bro -->
  </thead>
  <!-- collection will be appended here -->
</table>

new CollectionView({
  collection,
  el: this.ui.table[0],
  childView: TBodyView
});

this allowed for the thead to be kept while being able render the models with tbody as the tagName.

[paulfalgout]

At that point, what is the purpose of having the region in that at all?

[rafde]

Like the Region class binding to the DOM? Nothing, now that you point that out. I always saw Regions as place holders/markers for rendering *View classes. What I didn't like was all the wrapping that came with showChildView, and in some cases I use the example I gave.

[paulfalgout]

I think a Region's main goal is handling the lifecycle events. I think that once you want some DOM and a view inside a "region" you now have a CollectionView.

What I don't want to start supporting with a single region is:

<table data-ui="table">
  <!-- a view get's appended here -->
  <thead>
    <!-- don't remove me, bro -->
  </thead>
  <!-- a different view get's appended here -->
  <!-- a completely different view get's appended here -->
</table>

or even just

<table data-ui="table">
  <!-- a view get's appended here -->
  <thead>
    <!-- don't remove me, bro -->
  </thead>
</table>

[rafde]

yeah, that looks like a massive nightmare to support. Also, fragile. All thought provoking ideas, is all.

[paulfalgout]

Closing this for now. This PR did it's job mostly.. will reinvestigate when other things start to shake out.