BBQ ideas.

ba-bbq-ideas.js

// jQuery BBQ ideas

// ============================================================================
// MESSAGING BUS
// ============================================================================

var publish = function(message) {
  location.hash = '#' + message;
};

var onpublish = function(broadcast) {
  $(window).bind("hashchange", function(e) {
    var message = location.hash.replace(/^#/, "");
    broadcast(message);
  });
};

// Create a new BBQ messaging bus.
var bbqHash = $.bbq(publish, onpublish);

// Create a "route" object.
var r = $.bbq.route("/search/:query/p:page");

// Sample route parsing.
r.stringify({query: "cowboy", page: 1}); // "/search/cowboy/p1"
r.parse("/search/cowboy/p1"); // {query: "cowboy", page: "1"}
r.parse("/search"); // null

// Whenever bbqHash.set(r, ...) is called and the hash is changed, if r.parse
// of that hash returns non-null, execute the callback. Basic route matching
// handler stuff.
bbqHash.get(r, function(params) {
  console.log(params);
});

// Update the hash.
bbqHash.set(r, {query: "cowboy", page: 1});
// hash changed to #/search/cowboy/p1
// logged: {query: "cowboy", page: "1"}
bbqHash.set(r, {page: 2});
// hash changed to #/search/cowboy/p2
// logged: {query: "cowboy", page: "2"}
bbqHash.get(r); // {query: "cowboy", page: "2"}


// Create a "query" object. TODO: FIGURE THIS OUT
var q = $.bbq.query({action: "search"});

// Sample query parsing.
q.stringify({query: "cowboy", page: 1}); // "action=search&query=cowboy&page=1"
q.parse("action=search&query=cowboy&page=1"); // {action: "search", query: "cowboy", page: "1"}
q.parse("query=cowboy"); // null

// Whenever bbqHash.set(q, ...) is called and the hash is changed, if q.parse
// of that hash returns non-null, execute the callback.
bbqHash.get(q, function(params) {
  console.log(params);
});

// Update the hash.
bbqHash.set(q, {query: "cowboy", page: 1});
// hash changed to #action=search&query=cowboy&page=1
// logged: {action: "search", query: "cowboy", page: "1"}
bbqHash.set(q, {page: 2});
// hash changed to #action=search&query=cowboy&page=2
// logged: {action: "search", query: "cowboy", page: "2"}
bbqHash.get(q); // {action: "search", query: "cowboy", page: "2"}




// ============================================================================
// ADAPTER
// ============================================================================

// The default adapter might look something like this:
$.bbq.adapter = {
  parse: $.deparam,
  stringify: $.param
};

// If you don't pass an adapter, it uses the default:
$.bbq.pushState({action: "search", query: "cowboy", page: 1});
// hash changed to #action=search&query=cowboy&page=1
$.bbq.pushState({page: 2});
// hash changed to #action=search&query=cowboy&page=2
$.bbq.getState(); // {action: "search", query: "cowboy", page: "2"}

// You can use any adapter that supports .parse and .stringify methods:
$.bbq.pushState(JSON, {action: "search", query: "cowboy", page: 1});
// hash changed to #{"action":"search","query":"cowboy","page":1}
$.bbq.pushState(JSON, {page: 2});
// hash changed to #{"action":"search","query":"cowboy","page":2}
$.bbq.getState(JSON); // {action: "search", query: "cowboy", page: 2}

// Let's use a custom "route" adapter. It implements .parse and .stringify
// methods that return an object and string, respectively.
var r = $.bbq.router("/search/:query/p:page");

$.bbq.pushState(r, {query: "cowboy", page: 1});
// hash changed to #/search/cowboy/p1
$.bbq.pushState(r, {page: 2});
// hash changed to #/search/cowboy/p2
$.bbq.getState(r); // {query: "cowboy", page: "2"}


// Possible sugar for multiple routes.
$.bbq.router.define = function(obj) {
  var o = {};
  $.each(obj, function(k, v) {
    o[k] = $.bbq.router(v);
  });
  return o;
};

var r = $.bbq.router.generate({
  search: "/search/:query/p:page",
  users: "/users",
  user: "/user/:id"
});

$.bbq.pushState(r.search, {query: "cowboy", page: 1});
// hash changed to #/search/cowboy/p1
$.bbq.pushState(r.search, {page: 2});
// hash changed to #/search/cowboy/p2
$.bbq.getState(r.search); // {query: "cowboy", page: "2"}