Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (53 sloc) 2.11 KB

Add named routes to your Backbone application.


Include the plugin after all dependencies.

<script src="/javascripts/underscore.js type="text/javascript"></script>
<script src="/javascripts/json2.js type="text/javascript"></script>
<script src="/javascripts/jquery.js type="text/javascript"></script>
<script src="/javascripts/backbone.js type="text/javascript"></script>
<script src="/javascripts/backbone_named_routes.js type="text/javascript"></script>

Given a Backbone Router:

var Workspace = Backbone.Router.extend({
  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7

This plugin provides a helper attribute that provides named routes which can be

... accessed on Backbone Routers

var router = new Workspace();

=> "/help"

=> "/search/kiwis"

router.helper.searchPath("kiwis", 7);
=> "/search/kiwis/p7"

... accessed on Backbone Views

var view = new Backbone.View();

=> "/help"

=> "/search/kiwis"

view.helper.searchPath("kiwis", 7);
=> "/search/kiwis/p7"

... mixed into Backbone Models, Collections, and other objects.

  helper: Backbone.NamedRoutes

var model = new Backbone.Model();

=> "/help"

=> "/search/kiwis"

model.helper.searchPath("kiwis", 7);
=> "/search/kiwis/p7"

Query parameters

Named routes accept an optional parameter that will append query parameters to the path.

var router = new Workspace();

router.helper.helpPath({ foo: "bar", baz: "boo" });
=> "/help?foo=bar&baz=boo"

router.helper.searchPath("kiwis", { foo: "bar", baz: "boo" });
=> "/search/kiwis?foo=bar&baz=boo"

router.helper.searchPath("kiwis", 7, { foo: "bar", baz: "boo" });
=> "/search/kiwis/p7?foo=bar&baz=boo"
Something went wrong with that request. Please try again.