JS for pubsub screencast

pubsub-demo.js

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

$(document).ready(function() {
  $('#searchForm').submit(function(e) {
    var term = $.trim($(this).find('input[name="q"]').val());

    if (!term) { return; }

    $.getJSON(
      'http://query.yahooapis.com/v1/public/yql?format=json&callback=', 
      { q : getQuery(term) }, 
      function(resp) {
        var results = resp.query.results.result, 
            tmpl = '<li><p><a href="{{url}}">{{title}}</a></p></li>',
            html;

        if (!results.length) { return; }

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

        $('#results').html(html);
      }
    );

    e.preventDefault();
  });

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

})(jQuery);






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

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

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

$.subscribe('/search/results', function(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; }
    $.publish('/search/term', [ term ]);
  });
});

})(jQuery);

resources

• PubSub plugin from phiggins
• YQL

I just watched the video on vimeo at http://vimeo.com/16234207 - a great short tutorial on pubsub.

The pubsub.js plugin can be found at: https://github.com/phiggins42/bloody-jquery-plugins

Thank you so much for taking the time to show us this technique.

How is this different from using .bind() / .trigger() ? http://api.jquery.com/trigger/

$.fn.bind and $.fn.trigger do far more work that $.publish and $.subscribe do. that said, they can be used to achieve the same effect.