Optional route parameters in Backbone.js? (again)

Question

I'm trying to set up routing in Backbone 0.9.10. I'd like to match routes of the following kind:

/england/
/england/birmingham
/france
/france/paris
...

etc. This is what I have in my router at the moment:

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "index",
    "(/:country)": "index",
    "(/:country)(/:city)": "index"
  },
  index: function(country, city) { 
      console.log('index', country, city);
  }
});
var StateApp = new AppRouter();
Backbone.history.start({ pushState: true });

I have two problems:

The 'index' function isn't firing at all at the moment, whatever URL I go to = /, /england or anything else.
I'm also not clear if the optional parameters will work the way I have set them up - is it OK to have two optional parameters in a row like this? I don't know how many countries I need to support yet, so I do want the country parameter to be a parameter, rather than specifying individual countries.

I'd much rather use proper URL routing than regex parsing if possible.

score 14 · Accepted Answer · answered Jan 18 '13 at 12:18

If you want, as in your example, to route all urls (including the root) to one method, your only need to define one route:

routes: {
  "(:country)(/:city)": "index"
}

Because both parameters are optional, this will match:

"" (Empty string)
"england"
"england/london"

If you want only the routes in format of england and england/london but not the root page /, declare a separate empty route, and make the :country part non-optional:

routes: {
  "" : "home",
  ":country(/:city)": "index"
}

Genius! Thank you so much. I just didn't need the initial slash. — Richard, Jan 18 '13 at 12:28

score 2 · Answer 2 · answered Jul 29 '13 at 17:05

If you want to have a single route and have flexibility to change what you want the urls to look like. you could also consider

routes: {
 "(/country/:country)(/city/:city)": "index"
}

matching

"" (Empty string)
"country/england"
"country/england/city/london"

Optional route parameters in Backbone.js? (again)

2 Answers2