• Introduction
• Articles We've Written
• Alexa
• The Team
• Let's Talk
• eBooks

Named Routes in Javascript - LessJsRoutes updated

Less JS Routes has just been released with some exciting new updates.

It can be found at http://github.com/stevenbristol/less-js-routes

From the README file:

LessJsRoutes

Have you ever wanted to use named routes in your JavaScript? So have I. Now you can.

LessJsRoutes will generate a javascript file with functions that give you the path to the route and functions that will call these routes using ajax (uses jQuery or Prototype).

Features

• Gives you a javascript function that will return the path for any route.
• Gives you a javascript function that will call any route with the proper method (PUT/POST/etc).
• Let’s you control which routes get generated with :only, :ignore flags.
• Handles nested routes.

Installation

NOTE for Rails 2 use branch “rails-2” NOTE: for Rails versions < 2.3 use version d9cacd51454814cf4268da007c439573418adbcd.

Add it to your Gemfile:

gem ‘less-js-routes’, :git => “http://github.com/stevenbristol/less-js-routes”

Generate the less_routes.js file

rake less:js:routes

or

Less::Js::Routes.generate!

This file should be regenerated any time the routes change, so it’s a good idea to put it into your deploy script or run it any time your app starts.

Configuration Options

Create an initializer and add this:

Less::Js::Routes::Config.configure do |config| config.debug = false #default is false config.ignore = [/devise/, :users, /admin/] #default is [] config.only = [:posts, :comments] #default is [] end

Debug

Adds debugging info to the javascript file.

Ignore

• Takes an array of regex or symbols.
• Will not generate a route if symbol or regex matches.
• If a symbol is passed the symbol must match the name of the controller without “controller,” so for the userscontroller you would just pass :user.
• If a regex is passed the regex is matched against any part of name (without “_controller”), so /admin/ will match on “admin,” “admins,” or “administrator.” /min/ will match on “min,” “admin,” etc.
• If both ignore and only are used, ignore will trump only, taking a “most restrictive approach.”

Only

• Takes an array of regex or symbols.
• Will only generate a route if symbol or regex matches.
• If a symbol is passed the symbol must match the name of the controller without “controller,” so for the userscontroller you would just pass :user.
• If a regex is passed the regex is matched against any part of name (without “_controller”), so /admin/ will match on “admin,” “admins,” or “administrator.” /min/ will match on “min,” “admin,” etc.
• If both ignore and only are used, ignore will trump only, taking a “most restrictive approach.”

Usage

If you have the following in your routes file:

resources :posts do resources :comments end resources :comments

This will be generated for you:

function postcommentspath(postid, format){ var _postid = lesscheckparameter(postid);var _format = lesscheckformat(format);return ‘/posts’ + ‘/’ + _postid + ‘/comments’ + format} function postcommentsajax(postid, format, verb, params, options){ var postid = lesscheckparameter(postid);var _format = lesscheckformat(format);return lessajax(‘/posts’ + ‘/’ + postid + ‘/comments’ + format, verb, params, options)} function newpostcommentpath(postid, format){ var _postid = lesscheckparameter(postid);var _format = lesscheckformat(format);return ‘/posts’ + ‘/’ + _postid + ‘/comments’ + ‘/new’ + format} function newpostcommentajax(postid, format, verb, params, options){ var _postid = lesscheckparameter(postid);var _format = lesscheckformat(format);return lessajax(‘/posts’ + ‘/’ + postid + ‘/comments’ + ‘/new’ + format, verb, params, options)} function editpostcommentpath(postid, id, format){ var _postid = lesscheckparameter(postid);var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return ‘/posts’ + ‘/’ + _postid + ‘/comments’ + ‘/’ + id + ‘/edit’ + _format} function editpostcommentajax(postid, id, format, verb, params, options){ var _postid = lesscheckparameter(postid);var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return lessajax(‘/posts’ + ‘/’ + postid + ‘/comments’ + ‘/’ + id + ‘/edit’ + _format, verb, params, options)} function postcommentpath(postid, id, format){ var postid = lesscheckparameter(postid);var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return ‘/posts’ + ‘/’ + _postid + ‘/comments’ + ‘/’ + id + _format} function postcommentajax(postid, id, format, verb, params, options){ var postid = lesscheckparameter(postid);var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return lessajax(‘/posts’ + ‘/’ + postid + ‘/comments’ + ‘/’ + id + _format, verb, params, options)} function postspath(format){ var format = lesscheckformat(format);return ‘/posts’ + _format} function postsajax(format, verb, params, options){ var format = lesscheckformat(format);return lessajax(‘/posts’ + format, verb, params, options)} function newpostpath(format){ var _format = lesscheckformat(format);return ‘/posts’ + ‘/new’ + _format} function newpostajax(format, verb, params, options){ var _format = lesscheckformat(format);return lessajax(‘/posts’ + ‘/new’ + format, verb, params, options)} function editpostpath(id, format){ var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return ‘/posts’ + ‘/’ + _id + ‘/edit’ + _format} function editpostajax(id, format, verb, params, options){ var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return lessajax(‘/posts’ + ‘/’ + id + ‘/edit’ + _format, verb, params, options)} function postpath(id, format){ var id = lesscheckparameter(id);var _format = lesscheckformat(format);return ‘/posts’ + ‘/’ + _id + _format} function postajax(id, format, verb, params, options){ var id = lesscheckparameter(id);var _format = lesscheckformat(format);return lessajax(‘/posts’ + ‘/’ + id + _format, verb, params, options)} function commentspath(format){ var format = lesscheckformat(format);return ‘/comments’ + _format} function commentsajax(format, verb, params, options){ var format = lesscheckformat(format);return lessajax(‘/comments’ + format, verb, params, options)} function newcommentpath(format){ var _format = lesscheckformat(format);return ‘/comments’ + ‘/new’ + _format} function newcommentajax(format, verb, params, options){ var _format = lesscheckformat(format);return lessajax(‘/comments’ + ‘/new’ + format, verb, params, options)} function editcommentpath(id, format){ var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return ‘/comments’ + ‘/’ + _id + ‘/edit’ + _format} function editcommentajax(id, format, verb, params, options){ var _id = lesscheckparameter(id);var _format = lesscheckformat(format);return lessajax(‘/comments’ + ‘/’ + id + ‘/edit’ + _format, verb, params, options)} function commentpath(id, format){ var id = lesscheckparameter(id);var _format = lesscheckformat(format);return ‘/comments’ + ‘/’ + _id + _format} function commentajax(id, format, verb, params, options){ var id = lesscheckparameter(id);var _format = lesscheckformat(format);return lessajax(‘/comments’ + ‘/’ + _id + _format, verb, params, options)}

Note

• Nested routes are generated.
• new and edit routes are generated.
• Singular and plural routes are generated.
• For each route two functions are generated:

Functions

*_path Functions:

• Params: id(s), format

  • id(s): The integer ids for the resource you’re accessing. Default is “.
  • format: The format you would like returned for the resource, example: "js”, “json,” “xml,” etc. Default is “.

• Returns: string that is the path to the resource.

Example:

//function commentspath(format) commentspath() ”/comments" //function commentspath(format) commentspath(‘json’) “/comments.json” //function commentpath(id, format) commentpath(1) “/comments/1” //function commentpath(id, format) commentpath(1, ‘js’) “/comments/1.js” //function editcommentpath(id, format) editcommentpath(17, ‘json’) “/comments/17/edit.json” //function postcommentspath(postid, format) postcommentspath(1) “/posts/1/comments” //function postcommentpath(postid, id, format) postcommentpath(1, 2) “/posts/1/comments/2” //function postcommentpath(postid, id, format) postcomment_path(1, 2, ‘xml’) “/posts/1/comments/2.xml”

*_ajax Functions:

Params: id(s), format, verb, params, options

• id(s): The integer ids for the resource you’re accessing. Default is “.
• format: The format you would like returned for the resource, example: "js”, “json,” “xml,” etc. Default is “.
• verb: The HTTP verb you’d like to use, ‘get,’ ‘post,’ ‘put,’ or ‘delete.’ Default is ‘get’.
• params: Additional params you’d like to pass to the ajax request. Example: {name: ‘steve’}

• options: Additional ajax options you’d like to pass to the javascript library ajax function.

  • If no "error” (“onFailure”) option is supplied the following will be executed if an error occurs:

function(r, status, errorthrown){alert(status + “: ” + errorthrown)}

If neither “success” (“onSuccess”) or “complete” (“onComplete”) options are supplied the following will be executed when the request completes with no error:

function®{eval(r.responseText)};

This means that by default rjs or any javascript that your app returns will be eval’d.

• Returns: Nothing. Everything happens async so there’s nothing to return.

Example:

//function postcommentsajax(postid, format, verb, params, options) postcommentsajax(1, ‘js’) postcommentsajax(1, ‘json’, null, null, {success: function®{console.log®}})) //function postsajax(format, verb, params, options) postajax(‘js’, ‘post’, {posttitle: “title”, post_body: “body”})

Share this article via:

Linkedin |

Facebook |

Twitter

LessEverything, Inc. © 2018