Marionette.js. View. Accessing UI elements

To get the handles to your UI elements, use the getUI(ui) method

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 { View, Region } = Marionette; // import { View } from 'backbone.marionette';

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'
  },
  
  onDoSomething() {
    const saveButton = this.getUI('save');
    
    saveButton.addClass('disabled');
    saveButton.attr('disabled', 'disabled');
  }
});

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