JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://github.com/ifandelse/postal.js/raw/master/lib/standard/postal.js"></script>
<script src="https://raw.github.com/ifandelse/postal.when/master/lib/browser/postal.when.js"></script>
<div id="content">Waiting on messages to arrive...</div>

CSS

div {
    text-align: center;  
    font-size: 14pt;
    font-family: monospace;        
}

JavaScript

postal.when([
    { channel: "ChannelA", topic: "topic.on.channel.a" },
    { channel: "ChannelB", topic: "topic.on.channel.b" },
    { channel: "ChannelC", topic: "topic.on.channel.c" },
    { channel: "ChannelD", topic: "topic.on.channel.d" },    
], function(a, b, c, d){
    $('#content').html("");
    _.each(arguments, function(x) {
        $('#content').append("<div>" + x + "</div>");
    });
});
    
setTimeout(function(){
    postal.publish( { channel: "ChannelD", topic: "topic.on.channel.d", data: "And it's testable!" } );
},750);

setTimeout(function(){
    postal.publish( { channel: "ChannelB", topic: "topic.on.channel.b", data: "Deferred behavior!" } );
},2000);

setTimeout(function(){
    postal.publish( { channel: "ChannelA", topic: "topic.on.channel.a", data: "Hey look!" } );
},1500);

setTimeout(function(){
    postal.publish( { channel: "ChannelC", topic: "topic.on.channel.c", data: "Via message bus!" } );
},100);