Duplication is Bad. Let's DRY (Don't Repeat Yourself) our routes to make /pp:per_page
an optional part of the page
route.
var AppRouter = new (Backbone.Router.extend({ routes: { "appointments/p:page(/pp:per_page)": "page" }, page: function(page, per_page){ per_page = per_page || 10; this.appointments.fetch({data: {page: page, per_page: per_page}}); } }));
Dr. Goodparts has the bad habit of typing out his URL's with a trailing slash and now he's upset that our routes don't work. Please update the route below to optionally accept an optional trailing slash
var AppRouter = new (Backbone.Router.extend({ routes: { "appointments/p:page(/pp:per_page)(/)": "page" }, page: function(page, per_page){ per_page = per_page || 10; this.appointments.fetch({data: {page: page, per_page: per_page}}); } }));
The Server Team is at it again and has added the ability to select a page and the per page using natural language. So instead of page 25
, they can now accept "twenty five"
. Our page
route function should work as is but it needs to be able to handle encoded params. To fix this, decode the page
and per_page
params in the page
function.
var AppRouter = new (Backbone.Router.extend({ routes: { "appointments/p:page(/pp:per_page)(/)": "page" }, page: function(page, per_page){ page = decodeURIComponent(page); per_page = decodeURIComponent(per_page); this.appointments.fetch({data: {page: page, per_page: per_page}}); } }));
Rewrite the show route to only accept numeric input for the id
parameter. You'll have to add the initialize
function to the AppRouter
and use a regular expression.
var AppRouter = new (Backbone.Router.extend({ routes: { "appointments/:id": "show" }, show: function(id){ var appointment = new Appointment({id: id}); console.log(appointment); } })); AppRouter.route(/{d}*/);
Just in case people fiddle around with the URL let's add a catch-all route to our router that will log out to the console. Make sure the catch-all route comes last.
var AppRouter = new (Backbone.Router.extend({ routes: { "appointments/:id": "show", "*path": "notFound" }, show: function(id){ var appointment = new Appointment({id: id}); console.log(appointment); }, notFound: function(path){ console.log("not found"); } })); AppRouter.navigate('notthinghere', {trigger: true});