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;
}

.bg-error{
  background-color: red;
}

JavaScript

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

View.setRenderer(TemplateCache.render);

const MyView = View.extend({
  className() {
    return this.model.successful() ? 'bg-success' : 'bg-error';
  },

  template: '#template-identifier',

  regions() {
    return {
      myRegion: '.my-region'
    };
  },

  modelEvents() {
    const wasSuccessful = this.model.successful();
    return {
      change: wasSuccessful ? 'removeBackground' : 'alert'
    };
  },

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

  alert() {
    console.log('model changed');
  }
});
const exampleView = new View({
  template: false,
	el:'#example',
  regions:{
    'article-region': '#article-region'
  }
});
exampleView.render();

const model = new (Backbone.Model.extend({
  successful(){
    return !!this.get('isSuccessful');
  }
}));

model.set('isSuccessful', true);
const myView = new MyView({model});

exampleView.showChildView('article-region', myView);