cowboy / pubsub-demo.js

Created December 16, 2010 — forked from rmurphey/pubsub-demo.js


    
    View pubsub-demo.js 
  
  
      pubsub-demo.js
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            49
            50
            51
            52
            53
            54
            55
            56
            57
            58
            59
            60
            61
            62
            63
            64
            65
            66
            67
            68
            69
            70
            71
            72
            73
            74
            75
            76
            77
            78
            79
            80
            81
            82
            83
            84
            85
            86
            87
            88
            89
            90
            91
            92
            93
            94
            95
            96
            97
            98
            99
            100
            101
            102
            103
            104
            105
            106
            107
            108
            109
            110
            111
            112
            113
            114
            115
            116
            117
            118
            119
            120
            121
            122
            123
            124
            125
            126
            127
            128
            129
            130
            131
            132
            133
            134
            135
          
          
// Note that this uses my Pub/Sub implementation, which is slightly different than
// phiggins' in that jQuery custom events are used, and as such the first event handler
// argument passed is the event object.
//
// jQuery Tiny Pub/Sub: A really, really, REALLY tiny pub/sub implementation for jQuery
// https://gist.github.com/661855
 
 
// The "traditional" way.
 
// On DOM ready, bind a submit handler to form#search that performs an
// AJAX request, updating the DOM with search results upon completion.
jQuery(function($){
 
  $('#search').submit(function(e){
    var term = $.trim( $(this).find( 'input[name="q"]' ).val() );
 
    if ( term ) {
      e.preventDefault();
 
      $.getJSON(
        'http://query.yahooapis.com/v1/public/yql?format=json',
        { q: getYQLQuery( term ) },
        function(resp){
          var html,
              tmpl = '<li><a href="{{url}}">{{title}}</a></li>';
 
          if ( resp.query && resp.query.count > 0 ) {
 
            html = $.map( resp.query.results.result, function(result){
              return tmpl
                .replace( '{{url}}', result.url )
                .replace( '{{title}}', result.title )
            }).join('');
 
            $('#results').html( html );
          }
        }
      );
    }
  });
 
  // YQL helper function.
  function getYQLQuery( term ) {
    return 'select title,url from search.news where query="' + term + '"';
  }
 
});
 
 
// The "pub/sub" way.
 
(function($){
 
  // Initiate a search.
  $.subscribe( '/search/term', function( term ) {
    $.getJSON(
      'http://query.yahooapis.com/v1/public/yql?format=json',
      { q: getYQLQuery( term ) },
      function(resp) {
        if ( resp.query && resp.query.count > 0 ) {
          $.publish( '/search/results', [ term, resp.query.results.result ] );
        }
      }
    );
  });
 
  // Update the search term input if the term changes.
  $.subscribe( '/search/term', function( term ) {
    $('#search input[name="q"]').val( term );
  });
 
  // YQL helper function.
  function getYQLQuery( term ) {
    return 'select title,url from search.news where query="' + term + '"';
  }
 
  // Display search results.
  $.subscribe( '/search/results', function( term, results ) {
    var tmpl = '<li><a href="{{url}}">{{title}}</a></li>',
        html = $.map(results, function(result){
          return tmpl
            .replace( '{{url}}', result.url )
            .replace( '{{title}}', result.title )
        }).join('');
 
    $('#results').html( html );
  });
 
  // On DOM ready, bind a submit handler to form#search that simply
  // publishes the search term.
  $(function(){
    $('#search').submit(function(e) {
      var term = $.trim( $(this).find( 'input[name="q"]' ).val() );
 
      if ( term ) {
        e.preventDefault();
 
        $.publish( '/search/term', [ term ] );
      }
    });
  });
 
})(jQuery);
 
 
// But wait.. a whole new "previous searches" feature.. with minimal effort!
 
(function($){
  var searches = {};
 
  // Prepend a search term to ul#searches upon each new search,
  // deleting any existing search for that term.
  $.subscribe( '/search/term', function( term ){
    if ( searches[ term ] ) {
      searches[ term ].remove();
    }
 
    searches[ term ] = $( '<li><a href="#">' + term + '</a></li>' );
    searches[ term ].prependTo( '#searches' );
  });
 
  // On DOM ready, bind a delegated click listener to ul#searches
  // that re-publishes the search term.
  $(function(){
    $('#searches').delegate( 'a', 'click', function(e){
      e.preventDefault();
 
      var term = $(this).text();
      $.publish( '/search/term', [ term ] );
    });
  });
 
})(jQuery);