JsRouteHelpers
Use Rails route helpers in your javascript.
For example, take the following route definition:
config/routes.rb
get "/users/:id", to: "users#show", as: :user
Rails gives you a user_path
helper, which you can use like this:
user_path(3) # => "/users/3"
JsRouteHelpers gives you a similar javascript helper:
RouteHelpers.userPath(3) // => "/users/3"
NOTE: Javascript names are conventionally camelCase, so make sure to use the camelCase versions of your route helpers when calling them client-side.
Installation
Add this line to your application's Gemfile:
gem 'js_route_helpers'
And then execute:
$ bundle
Or install it yourself as:
$ gem install js_route_helpers
Usage
Setup
-
Define a route pattern whitelist in an initializer. Each item in the list should be a regular expression. If a route helper's name matches any pattern in the list, it will be exposed to the client in the javascript file.
config/initializers/js_route_helpers.rb
JsRouteHelpers.include [ %r(user), %r(post) ]
Important: You must whitelist any route you wish to expose. You will probably not want to expose all of your routes. No routes are whitelisted by default.
-
Now, require
route_helpers
in your javascript file.app/assets/javascripts/application.js
//= require route_helpers
-
Now you can use your route helpers in your javascript just like you would in ruby.
RouteHelpers.userPath(3, { param: "value", format: "json" }) // => "/users/3.json?param=value"
Important!
You may need to flush the asset cache after making changes to config/routes.rb
in order to force the changes to propagate into route_helpers.js
. You can do this by running
$ rake tmp:cache:clear
This shouldn't be too much of a nuisance in the long run, as routes tend to be fairly stable.
Examples
Here are some example rails route helpers, and then the javascript counterparts provided by JsRouteHelpers:
ruby:
user_path(3) # => "/users/3"
user_path(3, { param: "value" }) # => "/users/3?param=value"
user_path(3, { param: "value", format: "json" }) # => "/users/3.json?param=value"
user_path(3, { list: [1, 2] }) # => "/users/3?list%5B%5D=1&list%5B%5D=2"
javascript:
RouteHelpers.userPath(3) // => "/users/3"
RouteHelpers.userPath(3, { param: "value" }) // => "/users/3?param=value"
RouteHelpers.userPath(3, { param: "value", format: "json" }) // => "/users/3.json?param=value"
RouteHelpers.userPath(3, { list: [1, 2] }) // => "/users/3?list%5B%5D=1&list%5B%5D=2"
Again, note that JsRouteHelper method names are camelCase to follow javascript convention.
Contributing
- Fork it ( https://github.com/jordanstephens/js_route_helpers/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request