Backbone Routes - trigger route on page load

Question

This is a simple question, but I am new to routing and haven't been able to find an answer to this.

I have a Marionette Router (if I intimidate you, its really the same thing as a Backbone Router. Very simple).

sys.routes = {
  "app/:id": "onAppRoute",
};

sys.Router = new Marionette.AppRouter({
  controller: {
    onAppRoute: function(route) {
      console.log('Called app route!');
    },
  },
  appRoutes: sys.routes,
});

Backbone.history.start({pushState: true})  

This works - if you hit the back button my browser, the url will change within my Single Page Application and will call the onAppRoute function.

However, let's say I open a new browser window and paste in my page url to a certain 'app':

http://localhost/app/myApplication

This doesn't call the onAppRoute function. It doesn't even seem like it should, though, but I really don't know.

I want it to.

I don't know if I am doing it wrong, or if I should just manually fire it by grabbing my page url on page load, parsing it, then 'navigating' to that route. Seems hacky.

Answer 1

Contrary to your intuition, backbone's default behaviour is to trigger matching routes on page load! cf. http://backbonejs.org/#Router - look for the option silent: true. You'd have to specify that for the router to IGNORE your matching routes on page load, i.e. not trigger the corresponding callbacks.

So your problem lies somewhere else: your routes do NOT match the url you have stated as an example. Clearly, you require an :id parameter, trailing http://localhost/app/myApplication. Therefore, http://localhost/app/myApplication/213 would cause your callback to be triggered on page load, given you didn't pass silent: true as an option to backbone.history.start().

If you want to match the 'root' url, i.e. no params, you would define the following route:

routes: {
    '/': someFunction
}