Sneaky Abstractions

Update: I’ve put this in a plugin which also includes non-named routes, here.

If you’re writing unobtrusive JavaScript with Rails, figuring out URLs can sometimes be a bit of a show stopper. I’ve hard-coded URLs into my JS files more than once, and that smells. Wouldn’t it be just terrific if we could access Rails’ routes in JavaScript? Well, it turns out that’s not so difficult to achieve. Just put this in environment.rb:

File.open(File.join(RAILS_ROOT, 'public', 'javascripts', 'routes.js'), 'w') do |file|
  file << "var Routes = {\n"
  ActionController::Routing::Routes.named_routes.routes.each do |name, route|
    dynamic_segments = route.segments.select{|s| s.respond_to?(:key) }
    file << "  #{name}: function(#{dynamic_segments.map(&:key).join(', ')}) {\n"
    file << "    return '"
      route.segments.each do |segment|
        if segment.respond_to?(:key)
          file << "'+#{segment.key}+'"
        else
          file << segment.to_s
        end
      end
    file << "';\n"
    file << "  },\n\n"
  end
  file << "};"
end

It only works for named routes, but if you’re RESTful that should be enough. Getting “normal” routes in there should be possible, but it basically means you’d have to replicate the route recognition generation system in JavaScript, which I think would be non-trivial.

How to use it? Well, first of all, include routes.js:

<script src="/javascripts/routes.js" type="text/javascript"></script>

All the named routes will be defined as functions on the Routes object, and each function takes 0 or more parameters. They work pretty much like the generated helper methods in Rails. Let’s say we have these routes defined in routes.rb:

map.resources :articles
map.home '', :controller => 'main'

To generate the URLs in JavaScript, we’d use:

Routes.articles() // => "/articles/"
Routes.article(1) // => "/article/1"
Routes.home() // => "/"