Marionette.js. Behavior. Template and View

The Behavior has a number of proxies attributes that directly refer to the related attribute on a view: $, el, $el. In addition, each behavior is able to reference the view they are attached to through the view attribute

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"></div>

CSS

.highlight {
  color: red;
}

JavaScript

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

const MyModel = Backbone.Model.extend({
	defaults: {
  	selected: true
  }
});

const ViewBehavior = Behavior.extend({
  onRender() {
    if (this.view.model.get('selected')) {
      this.$el.addClass('highlight');
    }
    else {
      this.$el.removeClass('highlight');
    }
  }
});

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

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