Question

Marionette provides two components named Regions and Layouts. At first glance, they seem to provide similar functionality: A location on the page for my application to place subviews, plus some additional event binding fairy dust.

Looking under the hood, it’s fairly clear that each component is implemented in a very different way, but I’m not sure why and when I would want to use one over the other. What use cases are each component intended for?

Answer 1

Layouts and Regions serve very different purposes: a layout is a type of view, but a region will display a view in your HTML/DOM for you. A region may be used to display a layout. And a layout will also contain regions. This creates a nested hierarchy that can extend infinitely.

Region

A Region manages the content that is displayed within an HTML element on your web page. This is often a div or other “container” like element. You provide a jquery selector for the region to manage, and then you tell the region to show various Backbone views in that region.

<div id="mycontent"></div>

MyRegion = new Backbone.Marionette.Region({
  el: "#mycontent"
});

myView = new MyView();
myRegion.show(myView);

A region, then, is not directly rendered and does not have it’s own DOM interactions or updating. It is purely for the purpose of displaying a view at a specified point in the DOM, allowing different views to be swapped in and out, easily.

You can read more about Regions, here: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Layout

A Layout is a specialized type of view. It extends from Marionette.ItemView directly, which means it is intended to render a single template and may or may not have a model (or “item”) associated with that template.

The difference between a Layout and an ItemView is that a Layout contains Regions. When you define a Layout, you give it a template but you also specify regions that the template contains. After rendering the layout, you can display other views within the layout using the regions that were defined.

<script id="my-layout" type="text/html">
  <h2>Hello!</h2>
  <div id="menu"></div>
  <div id="content"></div>
</script>

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

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

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

layout.menu.show(new MyMenuView());
layout.content.show(new MyContentView());

Regions And Layouts Together

You can already see that Layouts and Regions are related, though they provide separate functionality. But a Layout and a Region can be used together to create sub-layouts and nested hierarchies of layouts, regions and views.

<script id="my-layout" type="text/html">
  <h2>Hello!</h2>
  <div id="menu"></div>
  <div id="content"></div>
</script>

<div id="container"></div>

container = new Backbone.Marionette.Region({
  el: "#container"
});

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

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

// Show the "layout" in the "container" region
layout = new MyLayout();
container.show(layout);

// and show the views in the layout
layout.menu.show(new MyMenuView());
layout.content.show(new MyContentView());

You can nest any number of layouts and regions together, with any number of views, using any view type that extends from Backbone.View (not just Marionette views).