Marionette.js. Defining and Attaching Behaviors

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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css">
<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="root-element"></div>
<div class="log"></div>

JavaScript

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

function log(str) {
  $('.log').append(str + '</br>')
}

const DestroyWarn = Behavior.extend({
  initialize() {
    const viewIsSet = !!this.view;
    log('Behavior.initialize - view property is set: ' + viewIsSet);
  },
  onInitialize() {
    const viewIsSet = !!this.view;
    log('Behavior.onInitialize - view property is set: ' + viewIsSet);  
  },
  onRender() {
    log('Behavior.onRender');
  },  
  ui: {
    destroy: '.destroy-btn'
  },
  // Behaviors have events that are bound to the views DOM.
  events: {
    'click @ui.destroy': 'warnBeforeDestroy'
  },

  warnBeforeDestroy() {
    const message = this.getOption('message');
    
    alert(message);
    // Every Behavior has a hook into the
    // view that it is attached to.
    this.view.destroy();
  }
});


const MyView = View.extend({
  initialize() {
    log('View.initialize');
  },
  onRender() {
    log('View.onRender');
  },
  el: '#root-element',
	template: _.template('<button class="destroy-btn">Destroy</button>'),
  behaviors: [
    {
      behaviorClass: DestroyWarn,
      message: 'You are about to destroy all your data!'
    }
  ]
});

const myView = new MyView();
myView.render();