mephux/annex

Simple client-side router

Annex

Annex is a simple client-side router that supports query paramaters based off the Grapnel.js router.

Why?

I found myself creating crazy routes to paginate data and passing params like so #/events/1390088285/1395088285/1/100.

OLD

// GET #/events/1390088285/1395088285/1/100.
route.add('events/:start/:end/:offset/:limit', function(start, end, offset, limit){
  // this sucks and it's a lot to remember and gets confusing quickly
});

NEW

// GET #/events?start=1390088285&end=1395088285&offset=1&count=100
route.add('events', function(req, params){
  // params
  // #=> { start: 1390088285, end: 1395088285, offset: 1, count: 100 }
});

Example

Supports basic query params and route params

var route = new Annex();

// GET #/example/15?hello=world
route.add('example/:id', function(req, params){
  // req:
  // #=> { id: 15 }
  
  // params
  // #=> { hello: "world" }
});

Supports complex query params

var route = new Annex();

// GET #/example/26/test?array[]=1&array[]=2&array[]=3
route.add('example/:id/:word', function(req, params){
  // req:
  // #=> { id: 26, word: "test" }
  
  // params
  // #=> { array: [1, 2, 3] }
});

slightly more complex

var route = new Annex();

// GET #/example/200/omg?array[]=1&array[]=2&array[]=3&params[foo]=1&params[bar]=2&params[baz]=3
route.add('example/:id/:word', function(req, params){
  // req:
  // #=> { id: 200, word: "omg" }
  
  // params
  // #=> { array: [1, 2, 3], params: { foo: 1, bar: 2, baz: 3 } }
});

License

• MIT License
• Props to Grapnel.js - https://github.com/EngineeringMode/Grapnel.js @EngineeringMode

Todo

• Clean up everything
• Add a get function that accepts a callback to fire once the route was successfully loaded.