-
-
Save cowboy/743922 to your computer and use it in GitHub Desktop.
Two approaches: "Traditional" vs Pub/Sub (via rmurphey)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
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 :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think this may need an update: the current implementation of your pub/sub strips the event before calling the subscribed functions, right?