Marionettev5
LEARN / APPLICATION STRUCTURE

A View.
A place for it.

Views own a piece of interface. Regions manage where a View is displayed and what happens when it is replaced.

Think of a Region as a named place in your application. Showing a View there renders and attaches it. Showing a different View replaces and destroys the previous one.

REGION previewVIEW NotesView

Show a View

Create a Region for an existing element. Define a small View, then ask the Region to show it.

import { View, Region } from 'marionette';

const NotesView = View.extend({
  template: () => '<h2>A place for your notes.</h2>'
});

const region = new Region({ el: '#preview' });
region.show(new NotesView());

region.hasView() now returns true. Its public currentView property identifies the displayed View.

The Region renders the View. You do not need to render it first.

Replace it

Show a different View in the same Region. The Region destroys the current View before displaying the replacement.

const previous = region.currentView;
region.show(new NotesView());

previous.isDestroyed(); // true
region.hasView();       // true

The Region remains available. Its previous View does not.

Leaving is part of the lifecycle.

region.empty() destroys the current View and leaves the Region empty. Use a View’s destruction lifecycle for resources that your application creates and owns.

region.empty();
region.hasView(); // false

A lifecycle hook is a place to release your resources; it does not automatically clean up every arbitrary timer or external subscription you create.

Explore replacement and cleanup

Know which version you’re reading.

This focused guide explains the lifecycle illustrated on the homepage. The full Region reference is also available as Markdown.

The examples run against the bundled Marionette runtime. The source notes identify the exact build used by this site.