A recent project has us using spine.js as well as a few other JavaScript libraries. Though spine.js comes with its own routing, it conflicts with pjax. The solution was to roll our own.

The requirements are simple, we should be able to give it a set of routes and their corresponding callbacks and we should be able to process the browsers url upon request. The CoffeeScript for that looks like this:

class Router
  @add: (path, callback) ->
    @routes ||= []
    @routes.push { 
      path: path, 
      callback: callback 
    }
  @process: ->
    for route in @routes
      params = window.location.pathname.match(route.path)
      if params?
        route.callback(params)
        return

This code works exactly as we want it too, but there are a few things I’d like to make better. The first of which is that we have to provide a regex as the path so our routes would look something like this:

Route.add /\/blog\/(\w*)/, blogCallback

It would be much easier to read and maintain if it followed more of a rails-routing-style semantic like this:

Route.add "/blog/:id", blogCallback

We can make this possible by processing the path string into its regex counterpart inside Route.add()

The first thing we need to do is escape the forward slashes ( / )

path.replace(/\//g, "\\/")

Then we need to change everything starting with a colon into a capture field

path.replace(/:(\w*)(?!(\w))/g,"(\\w*)")

And then we convert the fancied up string into a RegExp and save it as the path for our route. I’ve chained all of the replaces() together for simplicity.

path = new RegExp(path.replace(/\//g, "\\/").replace(/:(\w*)/g,"(\\w*)"))

The updated class looks like this:

class Router
  @add: (path, callback) ->
    @routes ||= []
    @routes.push { 
      path: new RegExp(path.replace(/\//g, "\\/").replace(/:(\w*)/g,"(\\w*)")), 
      callback: callback 
    }  
  @process: ->
    for route in @routes
      params = window.location.pathname.match(route.path)
      if params?
        route.callback(params)
        return

Then in our project, we have the following setup code.

$ ->
  Route.add "/blog/:id", blogCallback
  $(document).on "ready end.pjax", ->
    Route.process()

Whenever our document is ready or a pjax link has completed, our routes get matched against the url and the appropriate callback gets fired.