I've noticed a slight quirk in a Backbone application I'm building and was wondering if this behaviour is meant to be expected, or if I'm doing something wrong...

I fire up Backbone.history like so:

Backbone.history.start({
  root: '/au/store/',
  pushState: true,
  silent: true
});

To make back/forward button navigation trigger routes, I need them set up like this:

router = Backbone.Router.extend({
  routes: {
    'au/store/:slug' : 'slug',
    'au/store/?*params' : 'params'
  }
});

And this works fine. Navigating through the browser history to /au/store/?foo=bar triggers the 'params' route as expected.

The problem I'm having though is router.navigate() doesn't trigger the routes:

router.navigate('?foo=bar', {trigger:true});   // route doesn't trigger

Adding the root to the url doesn't work either:

router.navigate('au/store/?foo=bar', {trigger:true});  // navigates to /au/store/au/store/?foo=bar

So the workaround I'm using at the moment is to run all the routes twice, once with the root prefixed and once without:

routes: {
  'au/store/:slug' : 'slug',
  'au/store/?*params' : 'params',
  ':slug' : 'slug',
  '?*params' : 'params'
}

And now it triggers the routes on back/forward and also via router.navigate().

But this seems like a bit of a hack and would surely cause problems down the track with more plicated routes...

Can anyone explain to me what I'm doing wrong, or why it isn't behaving how I'm expecting it to?

I've noticed a slight quirk in a Backbone application I'm building and was wondering if this behaviour is meant to be expected, or if I'm doing something wrong...

I fire up Backbone.history like so:

Backbone.history.start({
  root: '/au/store/',
  pushState: true,
  silent: true
});

To make back/forward button navigation trigger routes, I need them set up like this:

router = Backbone.Router.extend({
  routes: {
    'au/store/:slug' : 'slug',
    'au/store/?*params' : 'params'
  }
});

And this works fine. Navigating through the browser history to /au/store/?foo=bar triggers the 'params' route as expected.

The problem I'm having though is router.navigate() doesn't trigger the routes:

router.navigate('?foo=bar', {trigger:true});   // route doesn't trigger

Adding the root to the url doesn't work either:

router.navigate('au/store/?foo=bar', {trigger:true});  // navigates to /au/store/au/store/?foo=bar

So the workaround I'm using at the moment is to run all the routes twice, once with the root prefixed and once without:

routes: {
  'au/store/:slug' : 'slug',
  'au/store/?*params' : 'params',
  ':slug' : 'slug',
  '?*params' : 'params'
}

And now it triggers the routes on back/forward and also via router.navigate().

But this seems like a bit of a hack and would surely cause problems down the track with more plicated routes...

Can anyone explain to me what I'm doing wrong, or why it isn't behaving how I'm expecting it to?

• javascript
• ajax
• backbone.js
• router

• So this was fixed in Backbone 0.9.2, it now works as it should (as described in both answers to this question.) – market Commented Jun 6, 2012 at 2:37

2 Answers 2

Get rid of the URLs in the router

router = Backbone.Router.extend({
  routes: {
    ':slug' : 'slug',
    '?*params' : 'params'
  }
});

Set silent to false to fire the route

Backbone.history.start({
  root: '/au/store/',
  pushState: true,
  silent: false
});

If the server has already rendered the entire page, and you don't want the initial route to trigger when starting History, pass silent: true.

reference http://documentcloud.github./backbone/#History-start

Update

Also you should use .htaccess to handle the root and the redirection. You need to use something like this :

# html5 pushstate (history) support:
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /au/store/
    RewriteCond %{THE_REQUEST} ^.*/index.php 
    RewriteRule ^(.*)index.php$ /au/store/$1 [R,L] 
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !^/index\.php
    RewriteRule (.*) index.php
</ifModule>

And add this to your head tag

<base href="/au/store/" />

And now sir you get a perfectly working environment

Get rid of the full URLs, Backbone automatically prepends the root for you. So, just with:

routes: {
    ':slug' : 'slug',
    '?*params' : 'params'
    }

you should be fine.