postal.js examples

Simple examples of postal.js

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script src="https://raw.github.com/ifandelse/postal.js/master/lib/standard/postal.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 distinctUntilChanged()
    <ul class="results" id="example4"></ul>
</div>

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

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

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

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

<div>
    Example 9 - using distinct to ignore any duplicate messages
    <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

// wiretap to print stuff to console
    postal.addWireTap(function(d,e) {
        console.log(JSON.stringify(e, null, 4));
    });

    // 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 Doctor.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( { channel: "Doctor.Who", topic: "DrWho.#.Changed" } ),
    starSubscription = starChannel.subscribe( function( data ) {
        $( '<li>' + data.type + " Changed: " + data.value + '</li>' ).appendTo( "#example3" );
    });
    /*
      Demonstrating how we're re-using the channel delcared above to publish, but overriding the topic
      in the second argument.  Note to override the topic, you have to use the "envelope" structure,
    ...