Marionette.js. View. Laying out Views - Regions

The Marionette.View class lets us manage a hierarchy of views using regions. Regions are a hook point that lets us show views inside views, manage the show/hide lifecycles, and act on events inside the children.

by marionettejs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="https://rawgit.com/marionettejs/backbone.marionette/next/lib/backbone.marionette.js"></script>

JavaScript

const { View } = Marionette; // import { View } from 'backbone.marionette';

const MyView = View.extend({
	template: _.template(`
    <div id="first-region">First region</div>
    <div id="second-region">Second region</div>
    <div id="third-region">Third region</div>
  `),
	regions: {
		firstRegion: '#first-region',
		secondRegion: '#second-region',
    secondRegion: '#third-region'
	}
});

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

$('body').append(myView.$el);