Marionette.js. View. Referencing UI in events

The UI attribute is especially useful when setting handlers in the events and triggers objects - simply use the @ui. prefix

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>

CSS

.disabled {
  color: gray;
}

JavaScript

const MyView = View.extend({
	template: _.template(`
    <button type="button" class="save-button">Save</button>
    <button type="button" class="close-button">Close</button> 
  `),
  ui: {
  	save: '.save-button',
    close: '.close-button'
  },
  events: {
    'click @ui.save': 'handleSave'
  },
  triggers: {
    'click @ui.close': 'close:view'
  },
  
  handleSave() {
    const saveButton = this.getUI('save');
    
    saveButton.addClass('disabled');
    saveButton.attr('disabled', 'disabled');
  }
});

const myRegion = new Region({ el: $('body') });
myRegion.show(new MyView());