Marionette Components


As seen from my last post, Marionette has alot of components that break down the Backbone.Router into more modularized parts. One reason is to remove boilerplate code. We'll take a look at the components of Marionette.

Marionette Views

4 Main Views.

ItemView is view for a single item/model. No special automated behavior. Most primitive view type.

CollectionView manages a collection. Wired up to iterate through each model in the collection and create a new sub-view for each of those models. Typically CollectionView creates ItemViews for each model, but you can also have CollectionView create subset CollectionView.

CompositeView is identical to CollectionView but has a template whereas CollectionView doesn't have a template. When to use CollectionView or CompositeView depends on how you want your subset ItemViews inserted.

Layout are ItemViews but also can manage regions within itself. All layouts have a template and you can pair portions of the template with DOM elements via jquery. A layout is a frame by which you can insert views into parts of the frame.

Application Object

The starting place of your application. Encapsulates and Namespaces. This is also where you define application regions (header-region, main-region, and footer-region).

Will also automatially clean up old views that have previously existed.


Independent top level applications. Modules have the highest level of responsibilities and are placed upon application regions. These modules then function as seperate sub-applications with their own models and views.

App Router

The same as Backbone.Router. Defined in top level module.


Manages each sub-module. Responsible for determining which entities(models/collections) are fetched and which views are shown.


Allow you to define a set of sub-regions within a top level region determined by a module. This allows more precise control of which views to be shown, thereby making nested views simple. You can also customize sub-regions to add transitions.

Messaging Bus

Top level of Marionette. Manages events at the module or application level. Has built-in pub/sub design pattern.