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.js/master/lib/standard/postal.diagnostics.js"></script>
<div>
    Example 1 - The World's Simplest Subscription
    <div class="results" id="example1"></div>
</div>

<div>
    Example 2 - Subscribing with the "#" wildcard character
    <ul class="results" id="example2"></ul>
</div>

<div>
    Example 3 - Subscribing with the "*" wildcard character
    <ul class="results" id="example3"></ul>
</div>

<div>
    Example 4 - using ignoreDuplicates()
    <ul class="results" id="example4"></ul>
</div>

<div>
    Example 5 - using disposeAfter(X)
    <ul class="results" id="example5"></ul>
</div>

<div>
    Example 6 - using whenHandledThenExecute(X)
    <ul class="results" id="example6"></ul>
</div>

<div>
    Example 7 - using withConstraint() to apply a predicate to subscription callback
    <ul class="results" id="example7"></ul>
</div>

<div>
    Example 8 - using withContext to set the "this" context
    <ul class="results" id="example8"></ul>
</div>

<div>
    Example 9 - using withDelay to delay evaluation of subscription
    <ul class="results" id="example9"></ul>
</div>

CSS

div {
    font-family: Tahoma, Arial;
    font-size: 10pt;
}

.results {
    margin-bottom:20px;
    padding: 10px;
    border-top: 1pt solid lightsteelblue;
    border-bottom: 1pt solid lightsteelblue;
}

JavaScript

// The world's simplest subscription
    var channel = postal.channel("Name.Changed");
    // subscribe
    var subscription = channel.subscribe(function(data) { $("#example1").html("Name: " + data.name); });
    // And someone publishes a first name change:
    channel.publish({ name: "Dr. Who" });
    subscription.unsubscribe();
    


    // Subscribing to a wildcard topic using #
    // The # symbol represents "one word" in a topic (i.e - the text between two periods of a topic).
    // By subscribing to "#.Changed", the binding will match
    // Name.Changed & Location.Changed but *not* for Changed.Companion
    var hashChannel = postal.channel("#.Changed"),
        chgSubscription = hashChannel.subscribe(function(data) {
            $('<li>' + data.type + " Changed: " + data.value + '</li>').appendTo("#example2");
        });
    postal.channel("Name.Changed")
          .publish({ type: "Name", value:"John Smith" });
    postal.channel("Location.Changed")
          .publish({ type: "Location", value: "Early 20th Century England" });
    chgSubscription.unsubscribe();

    
    // Subscribing to a wildcard topic using *
    // The * symbol represents any number of characters/words in a topic string.
    // By subscribing to "DrWho.*.Changed", the binding will match
    // DrWho.NinthDoctor.Companion.Changed & DrWho.Location.Changed but *not* Changed
    var starChannel = postal.channel("DrWho.*.Changed"),
        starSubscription = starChannel.subscribe(function(data) {
            $('<li>' + data.type + " Changed: " + data.value + '</li>').appendTo("#example3");
        });
    postal.channel("DrWho.NinthDoctor.Companion.Changed")
          .publish({ type: "Companion Name", value:"Rose" });
    postal.channel("DrWho.TenthDoctor.Companion.Changed")
          .publish({ type: "Companion Name", value:"Martha" });
    postal.channel("DrWho.Eleventh.Companion.Changed")
          .publish({ type: "Companion Name", value:"Amy" });
   ...