Use cases for the different views

There are many different types of Views provided by Marionette, and they can all be used in many different ways, to provide different visual behaviors. But there are a some best-use-cases for each of the views, and use cases that don't fit very well for certain views.

Marionette.View

This is a base view type that should not be used directly. It doesn't contain enough functionality to be useful on it's own. All other view types provided by Marionette extend from this one either directly or indirectly, though. It provides a few key points of functionality that all other views use, and provides a convenient place to override this behavior for all views.

If you are building your own view type or widget, and wish to take advantage of the base functionality found in all views, this may be an appropriate view to extend your custom view type from.

Marionette.ItemView

This is the most basic of view types that is usable on it's own. In the most simple of use cases, you can use this view type to render a simple template that has no functionality associated with it, other than rendering the template.

MyView = Backbone.Marionette.View.extend({
  template: "#my-template"
});

myView = new MyView();
myView.render();

You can also provide a single model to be rendered in to the template, or treat a collection as a single "items" to be rendered in to a simple template.

Marionette.CollectionView

A collection view is used for rendering a Backbone.Collection, and a view instance for each item in the collection. This view type works best for lists and other linear displays that do not need any additional HTML wrapper, other than the template rendered for each view.

MyItemView = Backbone.ItemView.extend({
  template: "#item-template"
});

MyCollectionView = Backbone.CollectionView.extend({
  itemView: MyItemView
});

Note that I have not specified a template for the collection view. This is because a CollectionView does not know how to render a template. It only knows how to create instances of the itemView for each item in the collection that it was handed.

If you need a collection view with a template for the parent collection - such as a table, a list with a header and footer, etc - then you want to use a CompositeView.

Marionette.CompositeView

A CompositeView is a collection view that knows how to render a template to wrap around the individual items.

For example, a table may need <thead> and <tfoot> tags, alone with the <table> tags, while rendering each item in the collection as a <tr> row. Composite views are perfect for this.

Composite views can also be used to build hierarchical and recursive structures. By default, a composite view will use itself as the itemView for each item in the template. This facilitates the hierarchy and recursive rendering ability. But you can specify an itemView the same way you can for a collection view.

For specific examples of using a composite view in many different ways, see this blog post:

http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

Marionette.Layout

Yes, I'm including layouts as a type of view, because they are a type of view. They extend directly from ItemView in fact, and provide all of the same functionality that an ItemView has. The major difference, in implementation, is that a Layout has embedded regions - visual areas of the rendered template that will be populated with other content from other views.

A Layout view, as it's name implies, is meant to be used as a page layout or sub-page / partial layout for your application. It allows you to render a template that has space available for other views to put content in to.

For example, a simple layout may include a menu bar and a content area, like this:

+--------------------------------------+
| <img src="logo.png"> etc             |
+--------------------------------------+
| <div id="menu-bar"></div>            |
+--------------------------------------+
| <div id="main-content">              |
|                                      |
|                                      |
|                                      |
| </div>                               |
+--------------------------------------+
| <footer>copyright statement</footer> |
+--------------------------------------+

In this template, there are two placeholder divs that represent the menu and the main content area of the layout. There's a header with an image / logo, and a footer with a copyright statement as well. The content of the menu and the main-content divs will change, but the header, footer and general layout will stay the same.

MyLayout = Backbone.Marionette.Layout.extend({
  template: "#my-layout-template",

  regions: {
    menu: "#menu-bar",
    content: "#main-content"
  } 
});

layout = new MyLayout();
layout.render();

layout.menu.show(myMenu);
layout.content.show(myContent);

For more information on regions, see the main readme documentation: https://github.com/derickbailey/backbone.marionette#marionetteregion