5.0.0-beta.1 · Published beta · b06750c5. Published on npm. Match your installed version.

Marionette Classes#

Each Marionette class has a job: render a piece of interface, manage where it goes, repeat it, share an interaction, or coordinate a feature. Start with the job you need, then follow the reference for its options and lifecycle.

The classes share configuration and inheritance patterns and a common set of methods.

Marionette.View#

A View owns a piece of interface through its root element, el. It renders a template, handles DOM interactions, and can divide a screen into Regions for child Views. Plain objects and function templates work with the default configuration.

View includes:

• The DOM API
• Class Events
• DOM Interactions
• Child Event Bubbling
• Entity Events
• View Rendering
• Prerendered Content
• View Lifecycle

A View can have Regions and Behaviors

Marionette.CollectionView#

A CollectionView manages an ordered set of child Views inside its root element. Use it for rows, cards, or other repeated content. A plain array supplies a static collection; an observable data integration can notify it of changes. You can also manage child Views directly without supplying a collection.

CollectionView includes:

• The DOM API
• Class Events
• DOM Interactions
• Child Event Bubbling
• Entity Events
• View Rendering
• Prerendered Content
• View Lifecycle

A CollectionView can have Behaviors.

Marionette.Region#

A Region gives a View a place to appear. Showing a new View renders and attaches it; replacing or emptying the Region destroys its current View by default.

Region includes:

• Class Events
• The DOM API

Marionette.Behavior#

A Behavior shares interaction logic between Views, such as keyboard shortcuts or a reusable button action. The host View constructs and cleans up its Behaviors.

Behavior includes:

• Class Events
• DOM Interactions
• Entity Events

Marionette.Application#

An Application coordinates a feature's asynchronous start, stop, restart, and destruction. It can own child Applications and display a View through an optional Region. Use it for work that should start and stop together.

Application includes:

• Class Events
• Radio API
• Common Marionette Functionality
• State API

An Application can have a single region.

Marionette.MnObject#

MnObject gives a nonvisual object initialization, events, options, and cleanup. Use it when those conventions are useful without an element or an Application's asynchronous lifecycle.

MnObject includes:

• Class Events
• Radio API.

State sources and StateApi#

Give a feature or View its own state, or pass in a source it should share. StateApi connects that source's notifications and cleanup to its owner.

Routing in Marionette#

Choose a router that fits your application. Route handlers can start an Application or show a View using ordinary application code.

Continue Reading about routing in Marionette.