Backbone Routes Not Being Called

Question

I have a strange issue I haven't been able to figure out as of yet. It's very simple which is probably why I'm having trouble with it :)

First, here's the routing table...

routes: {
    '': 'root', //called
    'report': 'report', // called
    'report/add': 'reportAdd', // not called
    'report/print': 'reportPrint', // not called
    'report/settings': 'reportSettings', // not called
},

You'll see I marked which ones are working and which ones aren't. The problem boils down to all subroutes (i.e report/add) not being matched.

Backbone history is called properly in main.js like so:

app.Router = new Router();
Backbone.history.start({ pushState: true });

Obviously, that's in the right spot because routes are working just not sub-routes. I've tried the root options of Backbone.history and the silent parameter all without any luck.

I imagine it's a configuration/setup issue but I haven't been able to find any answers. What am I doing wrong? Any help is much appreciated.

Btw, I'm using requirejs and Backbone Boilerplate but I don't see how that would make a difference.

UPDATE: Although the answer provided is technically correct, the problem is with Backbone Boilerplate. See the bottom of this blog post for an explanation. I'm having the same issue as the first commenter there.

That should work fine (http://jsfiddle.net/ambiguous/stBVC/), what are you doing that the fiddle isn't? — mu is too short, Dec 10 '12 at 04:42
The stinking `pushState` option was the problem. Now I've got hashed (#report/add) urls but it does work. How do I get rid of the hash URLs and use pushState? — Brandon, Dec 10 '12 at 04:53
So `` works when you don't use `pushState` but `` fails when you do use `pushState`? — mu is too short, Dec 10 '12 at 05:22
No,` works but it automatically adds the # to the URL. Reloading the page on `/report/add` fails but visiting `#report/add` works. It's strange I know. — Brandon, Dec 10 '12 at 06:33
I think you have to include some kind of server-side URL rewrite, when using push-state URLs, don't you? Ie, you have to make sure your server knows to return `/index.html` or whatever, when it receives a request like `/report/add`. — McGarnagle, Dec 10 '12 at 07:09
@dbaseman: You're thinking about ["if you have a route of `/documents/100`, your web server must be able to serve that page, if the browser visits that URL directly."](http://backbonejs.org/#History)? — mu is too short, Dec 10 '12 at 07:30
@muistooshort ah right ... but in theory, instead of having the web server serve `/documents/100`, couldn't you also have it serve (via URL rewrite) the root page; then, the Backbone router could render the content matching `/documents/100` ...? — McGarnagle, Dec 10 '12 at 07:45
@dbaseman: I was think along those lines but it doesn't seem to match the reported behavior. A demo would be awfully handy right about now. — mu is too short, Dec 10 '12 at 07:47
@muistooshort I don't know how I could demo this, but I got it working locally on IIS using a URL rewrite map; equivalent of (for the Op) ``, etc. Along with `Backbone.history.start({pushState: true, rootPath: '/rootpath/'})`, that causes loading `server/rootpath/report/add` to triggers the `reportAdd` route on page load... — McGarnagle, Dec 10 '12 at 08:25
@muistooshort This is the meat of it. The only thing not shown is the require.js setup which works fine because everything else is good. It's very odd no doubt. I'm starting to wonder if there's some sort of issue with Backbone Boilerplate because nothing else explains it and that's the server locally. Thanks so much for your help btw. — Brandon, Dec 10 '12 at 15:11
@dbaseman Please see previous comment to mu since I can't notify multiple users in a comment. — Brandon, Dec 10 '12 at 15:11

McGarnagle · Accepted Answer · 2012-12-10T17:31:47.893

As discussed in the comments, the problem is that, when using push-state style URLs, the server doesn't recognize the Backbone route URLs.

For illustration, say your application's root is at server/app/index.html, and you're trying to use a URL that Backbone routes to /report/print. With URL fragment routing, this is fine:

http://server/app/index.html#report/print

The server ignores the part after # and returns index.html; then on load Backbone routes to report/print.

But if you're using push-state routing, then the URL looks like this:

http://server/app/index.html/report/print

And the server throws a 404 error because it doesn't recognize anything at that path, so Backbone is never even loaded.

The solution is to either:

As the Backbone.js docs note, modify server code, so that the server renders the correct content for each Backbone route, or
(which I think is easier) put a URL rewrite in place on the web server (IIS, Apache), so that it will return index.html for any request that is a Backbone route like index.html/report/print, index.html/report/add, etc.

In IIS, for example, you'd put the following in the web.config under your application root:

<rewriteMaps>
    <rewriteMap name="StaticRewrites">
        <add key="index.html/report/print" value="index.html" />
        <add key="index.html/report/add" value="index.html" />
        <!-- etc -->
    </rewriteMap>
</rewriteMaps>

Backbone Routes Not Being Called

1 Answers1

Linked