Code
Code
Code

Pubsub another point of view

 

Yesterday Rebecca Murphey  published a screencast demo of how works the PubSub plugin by Peter Higgins.
The plugin is inspired by The Dojo Toolkit has a API with publish and subscribe.
The code plugin is incredibly simple, has more lines of code than comments, but the idea that implements is very interesting (INMHO).
The plugin has three methods: publish, subscribe and unsubscribe.
The subscribe method  "assings" a callback function to a particular identifier / channel.
The unsubscribe method does the opposite.
The publish method is the keystone of the library when you call publish he invoke all callback you've linked to on that channel, passing the parameters you specify.
In the post of Rebecca can see a sample code which clearly visualized the possibilities of the plugin.
The question is the same could be done with jQuery?
The answer is yes, using custom events, although I see the most elegant option is PubSub. Here I made a demo with custom events.
/* jQuery  way */
(function($) {
$(document).bind('search.term', function(e,term) {
 $.getJSON(
'http://query.yahooapis.com/v1/public/yql?format=json&callback=',
{ q : getQuery(term) },
function(resp) {
 if (!resp.query.results.result.length) { return; }
 $(document).trigger('search.results', [ resp.query.results.result ]);
}
 );
});
// look ma, a new feature!
$(document).bind('search.term', function(e,term) {
$('#searches').append('<li>' + term + '</li>');
});
$(document).bind('search.results', function(e,results) {  
var tmpl = '<li><p><a href="{{url}}">{{title}}</a></p></li>',
 html = $.map(results, function(result) {
return tmpl
 .replace('{{url}}', result.url)
 .replace('{{title}}', result.title)
 }).join('');
 $('#results').html(html);
});
function getQuery(term) {
 return 'select title,url from search.news where query="' + term + '"';
}
$(document).ready(function() {
 $('#searchForm').submit(function(e) {
e.preventDefault();
var term = $.trim($(this).find('input[name="q"]').val());
if (!term) { return; }
$(document).trigger('search.term', [ term ]);
 });
});
})(jQuery);

Yesterday Rebecca Murphey  published a screencast demo of how works the PubSub plugin by Peter Higgins.
The plugin is inspired by The Dojo Toolkit has a API with publish and subscribe.

The code plugin is incredibly simple, has more lines of code than comments, but the idea that implements is very interesting (INMHO).

The plugin has three methods: publish, subscribe and unsubscribe.

The subscribe method  "assings" a callback function to a particular identifier / channel.

The unsubscribe method does the opposite.

The publish method is the keystone of the library when you call publish he invoke all callback you've linked to on that channel, passing the parameters you specify.

In the post of Rebecca can see a sample code which clearly visualized the possibilities of the plugin.

The question is the same could be done with jQuery? 

 The answer is yes, using custom events, although I see the most elegant option is PubSub. Here I made a demo with custom events.

 


/* jQuery way */
(function($) {

$(document).bind('search.term', function(e,term) {
$.getJSON(
'http://query.yahooapis.com/v1/public/yql?format=json&callback=',
{ q : getQuery(term) },
function(resp) {
if (!resp.query.results.result.length) { return; }
$(document).trigger('search.results', [ resp.query.results.result ]);
}
);
});

// look ma, a new feature!
$(document).bind('search.term', function(e,term) {
$('#searches').append('<li>' + term + '</li>');
});

$(document).bind('search.results', function(e,results) {

var tmpl = '<li><p><a href="{{url}}">{{title}}</a></p></li>',

html = $.map(results, function(result) {

 

return tmpl
.replace('{{url}}', result.url)
.replace('{{title}}', result.title)
}).join('');
$('#results').html(html);
});

function getQuery(term) {
return 'select title,url from search.news where query="' + term + '"';
}

$(document).ready(function() {
$('#searchForm').submit(function(e) {
e.preventDefault();
var term = $.trim($(this).find('input[name="q"]').val());
if (!term) { return; }
$(document).trigger('search.term', [ term ]);
});
});

})(jQuery);

comments powered by Disqus
Comunicatek - - La Bisbal d’Empordà - dani@comunicatek.com - About code - Legal