Marionette - View Render

A base template to use for building Backbone and Marionette View lifecycle.

by Gabriel Vazquez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<script src="https://backbonejs.org/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.1/backbone.marionette.min.js"></script>
<header>

  <h1>A Marionette Playground</h1>

</header>
<section>
  <button id="destroyHeader">Destroy</button>
  <button id="createLayoutView">Create Layout View</button>
  <button id="createSimpleView">Create Simple View</button> 
  <button id="layoutDoubleAttachView">Replace Layout Child</button>
  <button id="renderView">Render View</button>
  <button id="initialize">Initialize</button>
</section>
<section id="app">

</section>

JavaScript

// Define the app and a region to show content
// -------------------------------------------
const MainLayoutView = Marionette.LayoutView.extend({
  el: '#app',
  template: _.template('<div class="application__content"></div>'),
  regions: {
    content: '.application__content'
  }
});
const SimpleView = Marionette.ItemView.extend({
  template: _.template('<div>View</div>'),
  onShow: function() {
    console.log('ChildView -> onShow');
  },
  onBeforeShow: function() {
    console.log('ChildView -> onBeforeShow');

  },
  onBeforeAttach: function() {
    console.log('ChildView -> onBeforeAttach');
  },
  onAttach: function() {
    console.log('ChildView -> onAttach');
  },
  onDomRefresh: function() {
    console.log('ChildView -> onDomRefresh');
  },
  onBeforeRender: function() {
  	console.log('ChildView -> onBeforeRender');
  },
  onRender: function() {
    console.log('ChildView -> onRender');
  },
  onDestroy: function() {
    console.log('ChildView -> onDestroy');
  }
});

const ComplexLayoutView = Marionette.LayoutView.extend({
  template: _.template('Nested<div class="content"></div><div class="content2"></div>'),
  regions: {
    content: '.content',
    content2: '.content2'
  },
  onShow: function() {
    console.log('LayoutView -> onShow');
  },
  onBeforeShow: function() {
    console.log('LayoutView -> onBeforeShow');
    // this.content.show(new SimpleView());
  },
  onBeforeAttach: function() {
    console.log('LayoutView -> onBeforeAttach');    
  },
  onAttach: function() {
    console.log('LayoutView -> onAttach');
  },
  onDomRefresh: function() {
    console.log('LayoutView -> onDomRefresh');
  },
  onRender: function() {
    console.log('LayoutView -> onRender');
  },
  onBeforeRender: function() {
  	console.log('LayoutView -> onBeforeRender');
  },
  onDestroy: function() {
    console.log('LayoutView -> onDestroy');
  },
  replaceChild: function() {
   console.log('LayoutView -> replaceChild');
    this.content.show(new SimpleView());
...