Optional trailing slash

[joshpangell]

When defining a root route, then pushing history onto the stack, then removing it, there is a trailing slash left over. This is not very desirable and would be great as an optional flag when starting history.

The origin of this appears to reside in the code here.

As an example:

Backbone.history.start({
    pushState: true,
    root: "/myroot"
});

Opening a page and pushing it onto the history stack works.

var url = "/Page-name";
Router.navigate( url, { trigger: true });

Result: example.com/myroot/Page-name (this is the desired result)

Then, when closing the page, passing a blank value to remove the page url creates a trailing slash:

var url = "";
Router.navigate( url, { trigger: true });

Result: example.com/myroot/

Desired result: example.com/myroot (no trailing slash)

[jashkenas]

Pinging @braddunbar, in particular about these two lines:

// Normalize root to always include a leading and trailing slash.
this.root = ('/' + this.root + '/').replace(rootStripper, '/');

... did you have a definite opinion at the time the change was made about root URLs (without additional components) needing to include the trailing slash? Or was that just a side effect of assuming that roots will usually only be a prefix for additional URL components?

[braddunbar]

Definitely the latter. I don't have a strong opinion on trailing slashes on the root, though I'm not aware of any problems with it.

@joshpangell What problem is the trailing slash causing? Is it purely aesthetic or does it cause a technical issue?

[jashkenas]

Then let's assume that "pure" root URLs never have a trailing slash put on by us ... although perhaps we allow you to .navigate to one with a slash if you do so manually. Resource-wise, it's best for us to not assume the old-school apache-slash-means-index.html idiom.

[braddunbar]

Sounds good, patch incoming.

[joshpangell]

@braddunbar The trailing slash is not causing a technical issue per say, but aesthetics are very important :)

[braddunbar]

I addressed this in #2659, but I'm not sure I like the solution. For one, I'm uncomfortable fiddling with such a finicky portion of the code for something that's not currently causing any problems. And for two, there are some caveats, as described in the pull. These could possibly be addressed, but it seems like a lot of trouble for a trailing slash.

[joshpangell]

A potential caveat is cache. Many people cache based on URL, especially with Varnish. Slashes in the URL are looked at as different locations, when in fact they are not.

[jashkenas]

but I'm not sure I like the solution

Right-o. Instead of this fiddling, can we simply normalize to never include the slash directly on the root?

[braddunbar]

Sure thing, updated in 151bd73.

[flvngrvllt]

I'm developing a WordPress theme based on Backbone and using pretty permalinks as http://example.com/multi-site-name/yyyy/mm/dd/post-name/. Assuming the root route is /multi-site-name/, automatically remove trailing slash is a problem in this case 'cause home page url becomes http://example.com/multi-site-name instead of http://example.com/multi-site-name/ and if I refresh my web browser when I am on http://example.com/multi-site-name, I have a loading extra time 'cause WordPress redirects to http://example.com/multi-site-name/

[pawelgur]

Same as @Deknar here.
We are using [only] trailing slashes everywhere (for the sake of SEO/duplicate pages in analytics).
Now (1.1.0) backbone always removes trailing slash from root even if using router.navigate("/") which is really undesirable.
This way Backbone forces to use url's without trailing slashes, this must be optional (when explicitly using router.navigate("/") slash shouldn't be removed ).

[kyse]

I know this is kind of old, but since I found this in a search I figured I'd post my solution as I haven't found any updates otherwise to allow us to specify optionally how we want it handled. The removal of the slash was causing my identity solution to issue relogin requests every time I hit the home route without the trailing slash.

Notes:
-I took this route versus editing the Backbone js directly in an effort to keep it playing nicely when backbone is downloaded via a Nuget package in the solution.

-I used the minified version for the most part and changed History.started to Backbone.History.started and the call for pathStripper needed to reference Backbone.pathStripper since this is being called outside the class.

Just place this somewhere in your JS after the dom is ready.

_.extend(Backbone.history, {
        navigate: function (t, e) { if (!Backbone.History.started) return false; if (!e || e === true) e = { trigger: !!e }; var i = this.root + (t = this.getFragment(t || "")); t = t.replace(Backbone.pathStripper, ""); if (this.fragment === t) return; this.fragment = t; if (this._hasPushState) { this.history[e.replace ? "replaceState" : "pushState"]({}, document.title, i) } else if (this._wantsHashChange) { this._updateHash(this.location, t, e.replace); if (this.iframe && t !== this.getFragment(this.getHash(this.iframe))) { if (!e.replace) this.iframe.document.open().close(); this._updateHash(this.iframe.location, t, e.replace) } } else { return this.location.assign(i) } if (e.trigger) return this.loadUrl(t) }
    });

[akre54]

Hey @kyse, how about the solution from #3136? Would that work for your use case?

I'd advise against adding monkey patches with minfied code. Think what a nightmare that'd be to maintain!