What's the difference between a Marionette Layout and a Region?

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).