Backbone.js: Single page application, routes and hrefs issue

Question

It might sound a bit complicated.

This is SinglePage, pushState enabled application. I have a route, for configuration:

    routes: {
        '': 'dashboard',
        'configure/sites/:id': 'configure',
        'configure/sites/:id/:section': 'configureSection'
    },

I'm using tbranyen/backbone-boilerplate way to navigate the urls. If I click a href from a dashboard a href="configure/sites/33, view rendered fine. In browser URL I can see, `localhost:12345/configure/sites/33'.

On configure view I have a menu, with some <a href= inside.

<ul class="nav configure-nav">
<li>
    <a href="overview" class="overview">Overview</a>
</li>
<li>
    <a href="configuration" class="configuration">Configuration</a>
</li>

The problem is, if I try to hit those links, the id goes away.

browser address bar

Expected href: http://localhost:12345/configure/sites/33/configuration

Actual href: http://localhost:12345/configure/sites/configuration

Could you please explain what happening and how to fix it?

score 0 · Answer 1 · answered Oct 02 '12 at 04:56

0

I don't know if this will fix your problem but if you're making a single page app, you should put a hashbang after "localhost:12345/" or all those requests will get sent to the server.

answered Oct 02 '12 at 04:56

Jordan Denison

2,649
14
14

As I said, I used [that](https://github.com/tbranyen/backbone-boilerplate/blob/master/app/main.js#L22) trick to catch all clicks on links and use Backbone.Router - so, it does not call server. – Alexander Beletsky Oct 02 '12 at 06:55
and I have pushState enabled routing. – Alexander Beletsky Oct 02 '12 at 07:04
Ahh, preventDefault being called by default, yes. It must be a problem with where the link is trying to pull the information for the ID, not sure what is causing it though. – Jordan Denison Oct 02 '12 at 11:54

score 0 · Answer 2 · answered Feb 03 '13 at 14:44

This is due to the way relative and absolute links work. In your case the hrefs are relative to the closest "directory" in your path (to keep the file system analogy the :id part can be seen as a file).

If you add a trailing slash to your routes the overview and configuration links will be rooted properly.

Backbone.js: Single page application, routes and hrefs issue

2 Answers2