Backbone: how to refresh a Router action

There is a little bug in BackboneJS Router’s logic:
If you try to trigger the same route twice (or more) then linked action is triggered only once.

In this simple tutorial I tell you why this behavior happens and I propose a simple workaround to let things works.
I also set up a jsFiddle example to demonstrate how this bug influence your app and the simple workaround to kill it.

The Problem

The problem lyes in BackboneJS History loadUrl() method logic: BackboneJS listen for a change event to the page’s url.

If you don’t change the url hashtag BackboneJS will not trigger any event!

Workaround

This is not a real “solution”. This is just a quick workaround.

  1. You can listen for the event who need to trigger a Router’s action. May be a link, a button or other events.
  2. Then you can force the Router to change the url to a non-routed value before your event happens.

Pretend you have a link that points to a routed hashtag:

<a href="#/myroute">...

Then you can intercept the action of this link and do something as follow:

$('a').click(function(){
    MyRouter.navigate('a-non-router-url');
});

jsFiddle Test Case

Click here to open a working example on jsFiddle now. You can see a preview in the embed fiddle below.