Marionette.js. Behavior. Using ui

As in views, events and triggers can use the ui references in their listeners. These can be defined on either the Behavior or the View

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="root-element">
  <form>
    <input type='text' placeholder='Username' />
    <input type='text' placeholder='Password' />
    <button class="save-btn">Save</button>
  </form>
</div>

JavaScript

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

const MyModel = Backbone.Model.extend({
	save() {
  	this.trigger('invalid');
  }
});

const MyFormBehavior = Behavior.extend({
  ui: {
    saveForm: '.save-btn'
  },
  events: {
    'click @ui.saveForm': 'saveForm'
  },
  modelEvents: {
    'invalid': 'showError'
  },

  saveForm(event) {
  	event.preventDefault();
    this.view.model.save();
  },

  showError() {
    alert('You have errors');
  }
});

const MyView = View.extend({
  el: '#root-element',
  model: new MyModel(),
  behaviors: [MyFormBehavior]
});

const myView = new MyView();