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>

JavaScript

const { MnObject } = Marionette; // import { MnObject } from 'backbone.marionette';

const notify = Backbone.Radio.channel('notify');

const User = Backbone.Model.extend({
	defaults: {
  	'isAuth': false
  }
});

const NotificationHandler = MnObject.extend({
  channelName: 'notify',

  radioRequests: {
    'show:success': 'showSuccessMessage',
    'show:error': 'showErrorMessage'
  },

  radioEvents: {
    'user:logged:in': 'handleLogin',
    'user:logged:out': 'handleLogout'
  },

  showSuccessMessage(message) {
		console.log(message);
  },

  showErrorMessage(message) {
    console.error(message);
  },

  handleLogin(user) {
    console.log(user.get('isAuth'));
  },

  handleLogout(user) {
    console.log(user.get('isAuth'));
  }
});

const userModel = new User();
const notificationHandler = new NotificationHandler();

userModel.set('isAuth', true);

notify.request('show:error', 'A generic error occurred!');
notify.trigger('user:logged:in', userModel);