Marionette.js. Behavior. Referencing the DOM

Behaviors, like views, have a ui attribute that can reference and cache DOM elements, just as in 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://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.0.0/backbone.marionette.js"></script>
<div id="root-element">
  <form>
    <input type='text' placeholder='Username' />
    <input type='text' placeholder='Password' />
    <br/>
    <button class="btn-check btn-save">Save</button>
  </form>
</div>

JavaScript

const MyModel = Backbone.Model.extend({
	save() {
  	console.log('Save form');
  },
  checkForm() {
  	console.log('Check form');
  }
});

var MyBehavior = Mn.Behavior.extend({
  ui: {
    saveForm: '.btn-save'
  },
  events: {
    'click @ui.saveForm': 'saveForm'  // .btn-save
  },

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

var MyView = Mn.View.extend({
	template: false,
  el: '#root-element',
  model: new MyModel(),
  behaviors: [MyBehavior],
  ui: {
    checkForm: '.btn-check'
  },
  events: {
    'click @ui.checkForm': 'checkForm'  // .btn-check
  },

  checkForm: function(event) {
  	event.preventDefault();
    this.model.checkForm();
  }
});

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