Defining the Application Region

The Application defines a single region el using the region attribute. This can be accessed through getRegion() or have a view displayed directly with showView().

by marionettejs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.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>
<nav>
  <a href="#">Home</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</nav>

<main id="main-content"></main>

CSS

nav {
  width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #AEEEE2;
  text-align: center;
}

nav > a {
  padding: 1em
}

main {
  text-align: center;
}

JavaScript

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

// Create three views to simulate the main pages
const MyViewHome = View.extend({
  tagName: 'h1',
  template: _.template('The Home page')
});

const MyViewContact = View.extend({
  tagName: 'h1',
  template: _.template('The Contact page')
});

const MyViewAbout = View.extend({
  tagName: 'h1',
  template: _.template('The About page')
});

// Create Marionette Application
const App = Application.extend({
  region: '#main-content',

  onStart() {
    Backbone.history.start();
  }
});

const MyApp = new App(); // Instance of our Application

// Create a simple Router to manage three routes
var Router = Backbone.Router.extend({
  routes: {
    '': 'HomePage',
    'contact': 'ContactPage',
    'about': 'AboutPage'
  },
	HomePage() {
    MyApp.showView(new MyViewHome());    // showView to display view
  },
  ContactPage() {
    MyApp.showView(new MyViewContact()); // showView to display view
  },
  AboutPage() {
    MyApp.showView(new MyViewAbout());   // showView to display view
  }
});


const AppRouter = new Router() // Instance of our Router

MyApp.start()