Region
A common use case is to swap between views in a common DOM element; this can be done by using the same el property in both views and calling the render() method on the view you want to see. But this way doesn't clean the memory and event bindings because both views will remain live in memory, even if they are not in the DOM.
A particularly useful scenario is when you need to switch between sub-applications, because sub-applications are rendered in the same DOM element normally. For example, when a user wants to edit contact information, he/she will click on an Edit button, and the current view will be replaced with an edit form.
Figure 2.2: Swapping views with regions
To switch between views, a Region class could be used as shown next:
var mainRegion = new Region({el: '#main'});
var contactViewer = new ContactViewer({model: contact});
contactViewer.on('edit:contact', function(contact) {
var editContact = new EditContactView({ model: contact });
mainRegion...
