JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<script src="https://rawgithub.com/postaljs/postal.js/master/lib/postal.js"></script>
<script src="https://rawgit.com/ifandelse/ConduitJS/master/lib/conduit.js"></script>
CSS
div {
border-bottom: 1pt solid navy;
padding-bottom: 1em;
margin-bottom: 1em;
}
JavaScript
var store = {};
var system = postal.channel(postal.configuration.SYSTEM_CHANNEL);
var tap = postal.addWireTap(function(d, e) {
var channel = e.channel, topic = e.topic;
if(e.preserve) {
store[channel] = store[channel] || {};
store[channel][topic] = store[channel][topic] || [];
store[channel][topic].push(e);
}
});
if(!postal.subscribe.after) {
var orig = postal.subscribe;
postal.subscribe = new Conduit.Sync({
context: postal,
target: orig
});
}
postal.subscribe.after(function(subDef, options) {
var channel = subDef.channel;
var binding = subDef.topic;
if(store[channel]) {
_.each(store[channel], function(msgs, topic) {
if(postal.configuration.resolver.compare(binding, topic)) {
_.each(msgs, function(env){
subDef.callback.call(
subDef.context || (subDef.callback.context && subDef.callback.context()) || this,
env.data,
env
);
});
}
});
}
});
postal.publish({
channel: "hai",
topic: "some.topic",
data: {
foo: "bar"
},
preserve: true
});
postal.publish({
channel: "hai",
topic: "another.thing",
data: {
baz: "bacon"
},
preserve: true
});
postal.subscribe({
channel: "hai",
topic: "#",
callback: function(d, e) {
$("body").append("<div><pre>" + JSON.stringify(e, null, 2) + "</pre></div>");
}
});