Backbone.js slash after hash in fallback - history pushState

Question

I'm using Backbone.js's routing. It generate urls for browsers like this:

http://my-app.com/help

For Internet Explorers (except IE10) and old non-HTML5 browsers:

http://my-app.com/#help

How to configure Backbone.js to generate fallback urls with additional slash, like this?:

http://my-app.com/#/help

I cheked the [source code](http://documentcloud.github.com/backbone/docs/backbone.html#section-96) and I was not able to figure out a way without changes in backbone.js itself. But maybe I'm just blind :). — kubetz, Dec 11 '11 at 02:08

score 6 · Answer 1 · answered Oct 30 '13 at 17:02

I know this is a bit old, but since the accepted answer no longer works in newer versions of Backbone, I figured I would share my findings.

I found a way to get this to work in IE8 and Chrome (have not testing any other browsers) - if you are using Backbone.history for navigation.

If you use two preceding slashes in the navigate call, it will create the Url like you want it.

Backbone.history.navigate('//help');

I did not change the routes at all - they do not start with a slash. Putting a slash there seemed to break it.

I should also note that I am using Marionette with Backbone as perhaps that could make a difference.

I hope this helps someone.

I was trying this and it updated the url correctly to show `/#/` (prettier), but now that triggers the route :/ Looking for another solution. — The Qodesmith, Apr 07 '16 at 03:42

score 2 · Accepted Answer · answered Dec 11 '11 at 02:46

2

I do believe that your 2nd code block is entirely different than the 3rd. The preceding slash is set on the property name.

routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  }

is different than:

routes: {
    "/help":                 "help",    // #/help
    "/search/:query":        "search",  // #/search/kiwis
    "/search/:query/p:page": "search"   // #/search/kiwis/p7
  }

answered Dec 11 '11 at 02:46

Trevor

11,269
2
33
40

OK, for IE urls look good `http://my-app.com/#/help` However for standard browser two slashes `http://my-app.com//help` – Wojciech Bednarski Dec 11 '11 at 02:59
It's likely that backbone only handles it one way. Though, the backbone docs do note that you can bind routes based on a regular expression `this.route(/^(\/)?help$/, "help", function(){ ... });` This will recognize the route with or without the prefixed slash. – Trevor Dec 11 '11 at 03:05
They document it by manually binding it. Test it out in the route definition as well. – Trevor Dec 11 '11 at 03:06
3

On another note, the newest version of Backbone (0.9.1) does not allow prefixing with a slash. Apparently it's not recommended. – Trevor Feb 03 '12 at 20:25

score 1 · Answer 3 · answered Mar 29 '12 at 20:32

Here's an ugly hack to get around it: override getHash(). Here's the original code:

getHash: function(windowOverride) {
  var loc = windowOverride ? windowOverride.location : window.location;
  var match = loc.href.match(/#(.*)$/);
  return match ? match[1] : '';
},

It seems to work after adding an extra slash to the regexp:

Backbone.History.prototype.getHash = function(windowOverride) {
  var loc = windowOverride ? windowOverride.location : window.location;
  var match = loc.href.match(/#\/(.*)$/);
  return match ? match[1] : '';
}

Navigate might not work after this, but it could probably be fixed with a similar hack.

Backbone.js slash after hash in fallback - history pushState

3 Answers3

Linked