Chaplin Regions vs Containers and Subviews

Question

I am having a difficult time understanding the difference between regions and containers when it comes to creating subviews. What is the use case for one over the other when creating subviews within a parent?

And secondly how does registering things as subview work in conjunction with these two options? Does that need to happen regardless or only when using containers?

Answer 1

Regions and containers in Chaplin are very similar. The primary difference between regions and containers is in the way a view is appended into them.

A region is an abstracted string mapping that gets appended through the Chaplin Mediator while a container is a selector that the view must know about (either passed in or set in the view declaration).

Found in the Chaplin source code (view.coffee line 77):

Regions are in essence named selectors that aim to decouple the view from its parent.

On the other hand, containers are simply selector strings you pass to or set directly on a view.

It's a subtle difference in use:

# region is a string mapping
# MyView does not need to know about the associated DOM element
class MyView extends Chaplin.View
    region: 'myRegion'

# container is a selector string
# MyView needs to know about the associated DOM element
class MyView extends Chaplin.View
    container: 'div#myContainer'

If a region has not been registered at the time a view attempts to attach to it, an error will be thrown.

---

How regions and containers get implemented gets a bit trickier:

If you have the noWrap property of a View set to true, the region element or the container element becomes the View's el.

If, however, you have both region and container declared the View's el property first gets set to the region element then the container element. The end result is the View's el property will be set the to container element.

Source code: view.coffee line 147

When it comes to attaching a view, however, the view first attempts to attach itself to its declared region. Then it will attempt to attach to the container if it's not already in the DOM.

What this means is that if you have both region and container declared, the view will actually be appended into the region element and never append into the container element.

Source code: view.coffee line 443

Given these two behaviors it would not be a good idea to declare both a region and a container on a View (at least if you set noWrap to true).

---

To answer your question regarding one use case over another:

The difference in implementation of both regions and containers are very subtle. If you want to abstract a view's parent element to a string, or you don't want to have to pass the parent element into the view instance, then a region may be the better choice. On the other hand if you want to more tightly couple your child view to it's parent view then declaring a container may be a better choice.

Registering a View instance as a subview should work the same regardless of which option you choose to go with.

It should be noted that you do not need to register a View instance as a subview even when appending it into through the container option. Subviews are simply string abstractions of Views that are automatically disposed.