pubsub example

by John Allan

HTML

<input id='inputText' />

<div class='display'>
    <p id="p1"></p>
    <button>track changes</button>
</div>
        
<div class='display'>
    <p id="p2"></p>
    <button>track changes</button>
</div>

<div class='display'>
    <p id="p3"></p>
    <button>track changes</button>
</div>

CSS

.display {
    border: 1px solid black;
    margin: 3em 1em;        
}
.display p {
    padding: 10px;        
}
.tracking = {
    background: #d4dfa3;        
}

JavaScript

var pubsub = (function () {

    var o = $({}),
        subscribe = function () {
            o.on.apply(o, arguments);
        },
        unsubscribe = function () {
            o.off.apply(o, arguments);
        },
        publish = function () {
            o.trigger.apply(o, arguments);            
        };
    
    return {
        'publish': publish,
        'subscribe': subscribe,
        'unsubscribe': unsubscribe    
    };
    
}());

var page = (function () {
    
    var elements,
        values,
        handleInputKeystroke = function () {
          var content = $(this).val();
          pubsub.publish('inputkeystroke', content);
        },
        handleTrackChangesClick = function () {
          var $parent, p, obj;
          
          $parent = $(this).parent();
          $target = $parent.children('p');
          id = $target.attr('id');
          
          obj = {
            'target': $target,
            'data': {
              'inputelement': elements.textinput
            },
            'action': updateDisplay
          };

          p = $.proxy(obj, 'action');
          
          if ($parent.hasClass('tracking')) {
            pubsub.unsubscribe('inputkeystroke.' + id, p);
            $parent.removeClass('tracking');
          } else {
            pubsub.subscribe('inputkeystroke.' + id, p);
            $parent.addClass('tracking');
          }

        },
        updateDisplay = function () {
          var txt;
          txt = this.data.inputelement.val();
          this.target.text(txt);
        },
        init = function () {
          elements = {
            'textinput':   $('#inputText'),
            'buttons':     $('button'),
            'displays':    $('.display')
          };
          
          elements.textinput.on('keyup', handleInputKeystroke);          
          elements.buttons.on('click', handleTrackChangesClick);
  
        };
    
    return {
        init: init            
    };
   ...