Marionette.js. Region. jQuery Animation

Shows how to configure a region to animate with jQuery

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>
<div id="main-region">
      <button class="showview">Show View</button>
      <button class="emptyview">Empty View</button>      
      
      <article id="content">
         Empty Region
      </article>  
</div>

CSS

.view1 {
	background: #0ac2d2;
}

.view2 {
	background: #7bb7fa;
}

.view3 {
	background: #60d7a9;
}

#content {
  margin-top: 40px;
  margin-left: 10px;  
}

JavaScript

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

const EmptyMsgRegion = Region.extend({
  onEmpty() {
    if (!this.isSwappingView()) {
      this.$el.append('Empty Region');
    }    
  }  
});

const MainView = View.extend({
  el: '#main-region',
  regions: {
    content: {
      el: '#content',
      regionClass: EmptyMsgRegion      
    }
  },  
  events: {
    'click .showview': 'onShowViewClick',
    'click .emptyview': 'onEmptyViewClick'
  },
  onShowViewClick(e) {
    const viewName = e.target.dataset.view;
    const view = new View({
      template: _.template('<h1>This is a View</h1>'),
      className: 'view1'
    })
   this.showChildView('content', view);    
  },
  onEmptyViewClick(e) {
    this.getRegion('content').empty();    
  }
});

const mainView = new MainView();