public
Last active — forked from rmurphey/pubsub-demo.js

Two approaches: "Traditional" vs Pub/Sub (via rmurphey)

  • Download Gist
pubsub-demo.js
JavaScript
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);

I think this may need an update: the current implementation of your pub/sub strips the event before calling the subscribed functions, right?

That should be all set now!

Awesome! And thanks for Pub/Sub, by the way -- I think its the most heavily used 16 lines of code in my whole current project :)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.