Marionette.js. Using Behaviors

The easiest way to see how to use the Behavior class is to take an example view and factor out common behavior to be shared across other views.

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/tooltipster/3.3.0/js/jquery.tooltipster.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="root-element">
  <button class="destroy-btn">Destroy</button>
</div>

JavaScript

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

const MyView = View.extend({
  ui: {
    destroy: '.destroy-btn'
  },  
  el: '#root-element',
  events: {
    'click @ui.destroy': 'warnBeforeDestroy'
  },
  
  warnBeforeDestroy() {
    alert('You are about to destroy all your data!');
    this.destroy();
  },

  initialize() {
    this.ui.destroy.tooltipster({
      content: 'What a nice mouse you have.'
    });
  }
});

const myView = new MyView();