Adding Region - Marionette

app.js

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 = Mn.View.extend({
  el: 'main',
  getTemplate: function() {
    /*
    * 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: function() {
  	/*
    * 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
      var modelUserInformation = Backbone.Model.extend({
        defaults: {
          username: 'Charlie Fake',
          age: 23,
          city: 'Texas'
        }
      });

      var viewUserInformation = Mn.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 de view with any model, can be User, Admin, o Guest
const myView = new MyView({model: models[Math.floor(Math.random() * models.length)]});

myView.render();

index.html

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

style.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;
}