Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 362
Brant Bobby Avatar asked May 09 '12 17:05

Brant Bobby


1 Answers

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

like image 116
Derick Bailey Avatar answered Oct 01 '22 03:10

Derick Bailey