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>
<script src="https://rawgit.com/marionettejs/marionette.templatecache/master/lib/marionette.templatecache.js"></script>
<script id="template-layout" type="x-template/underscore">
<h1>Hello, world</h1>
</script>

<!-- Template admin -->

<script id="template-admin" type="x-template/underscore">
<div class="view --admin">Admin template </div>
<div class="view --admin" id="region-dashboard-admin"></div>
</script>

<!-- Templates user -->

<script id="template-user" type="x-template/underscore">
<div class="view --user">User template </div>
<div class="view --user" id="region-dashboard-user"></div>
</script>

<script id="template-user-dashboard" type="x-template/underscore">
	<div class="view --user">
    <span>Name: <%= username %> </span> |
    <span>Age:  <%= age      %> </span> |
    <span>City: <%= city     %> </span>
  </div>
</script>

<!-- Templates guest -->

<script id="template-guest" type="x-template/underscore">
<div class="view --guest">Guest template </div>
<div class="view --guest" id="region-login-guest"></div>
</script>

<main>
  
</main>

CSS

.view {
  margin: 1em;
  box-shadow: 0 0 5px 1px #39464e;
  padding: 1em;
  position: relative;
}

.--user {
  background-color: #1c90f3;
}

.--admin {
  background-color: #249d7fa6;
}

.--admin::after {
    content: "★";
    position: absolute;
    right: 2em;
    top: 1em;
    color: #FFEB3B;
}

.--guest {
  background-color: #a8a8a899;
}

JavaScript

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

View.setRenderer(TemplateCache.render);

const User = Backbone.Model.extend({
  defaults: {
    is_user: false
  }
});


// Array of types of users
const models = [new User({is_user: true}), new User({is_admin: true}), new User()]

const MyView = View.extend({
  el: 'main',
  getTemplate() {
    /*
    * Get a template depending on the type of user
    */
    if (this.model.get('is_admin')) {
      return '#template-admin';
    } else if (this.model.get('is_user')) {
      return '#template-user';
    } else {
      return '#template-guest';
    }
  },
  onRender() {
  	/*
    * Add region depending on the type of user
    * And show the correct view
    */
    if (this.model.get('is_admin')) {
      this.addRegion('admin', '#region-dashboard-admin');
      this.showChildView('admin', 'Loading admin information . . .');
    } else if (this.model.get('is_user')) {
      this.addRegion('user', '#region-dashboard-user');
			
      // Fake User
      const modelUserInformation = Backbone.Model.extend({
        defaults: {
          username: 'Charlie Fake',
          age: 23,
          city: 'Texas'
        }
      });

      const viewUserInformation = View.extend({
        template: '#template-user-dashboard' 
      });

      this.showChildView('user', new viewUserInformation({
      	model: new modelUserInformation()
      }));
    } else {
    	this.addRegion('guest', '#region-login-guest');
      this.showChildView('guest', '<a href="#login">Login</a>');
    }
  }
});

// Render the view with any model, can be User, Admin, o Guest
const myView = new MyView({model: models[Math.floor(Math.random() * models.length)]});

myView.render();