JSFiddle - React, Tailwind, and code Playground

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.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0-pre.2/backbone.radio.js"></script>
<script src="https://rawgit.com/marionettejs/backbone.marionette/next/lib/backbone.marionette.js"></script>
<script src="https://rawgit.com/marionettejs/marionette.templatecache/master/lib/marionette.templatecache.js"></script>
<section id="example">
  <article id="article-region"></article>
</section>

<template id="template-identifier">
<div>example</div>
<div class="my-region"></div>
</template>

CSS

.bg-success{
  background-color: green;
}

JavaScript

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

View.setRenderer(TemplateCache.render);

const MyView = View.extend({
  className: 'bg-success',

  template: '#template-identifier',

  regions: {
    myRegion: '.my-region'
  },

  modelEvents: {
    'change': 'removeBackground'
  },

  removeBackground() {
    this.$el.removeClass('bg-success');
  }
});

const exampleView = new View({
  template: false,
	el:'#example',
  regions: {
    article: '#article-region'
  }
});

const model = new Backbone.Model({});

const myView = new MyView({model});

exampleView.showChildView('article', myView);
setTimeout(() => {
  model.set('something', 3);
}, 1000);