JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="https://raw.github.com/postaljs/postal.js/master/lib/postal.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/a2labs/riveter/master/lib/riveter.js"></script>

JavaScript

var msgMixin = {
    _preInit: function(attributes, options) {
        options = (this instanceof Backbone.View ? attributes : options) || {};
        this.subscriptions = _.extend({}, this.subscriptions, options.subscriptions);
        this.publications = _.extend({}, this.publications, options.publications);
        this.messaging = this.messaging || {};
        this.configureMessaging(); 
    },
    mixin: {
        configureMessaging: function() {
            this.setupSubscriptions();
            this.bridgeEvents();
        },
        
        bridgeEvents: function() {
            this.unbridgeEvents();
            if (!_.isEmpty(this.publications)) {
                _.each(this.publications, function(publication, evnt) {
                    var _publication = publication;
                    
                    if (!this.messaging.publications[evnt]) {
                        this.messaging.publications[evnt] = {};
                    }
                    
                    if (!_.isObject(publication)) {
                        _publication = {};
                        _publication[publication] = _.identity;
                    }
                    
                    _.each(_publication, function(accessor, pub) {
                        var meta = pub.split(' ');
                        var channel = meta[0];
                        var topic = meta[1];
                        var listener = function() {
                            var args = Array.prototype.slice.call(arguments, 0);
                            var data = accessor.apply(this, args);
                            postal.publish({
                                channel: channel,
                                topic: topic,
                                data: data || {}
                                           });
                        };
                        
                        this.on(evnt, listener, this);
                       ...