Simple backbone routing without hash URLs

Backtrace.js

r(function() {

  Backtrace = {};

  Backtrace.Router = (function() {

    Router.prototype.optionalParam = /\((.*?)\)/g;

    Router.prototype.namedParam = /:\w+/g;

    Router.prototype.splatParam = /\*\w+/g;

    Router.prototype.escapeRegExp = /[-{}[\]+?.,\\^$|#\s]/g;

    Router.prototype.rootURL = "";

    Router.prototype.routes = {
    };

    function Router() {
      this.initialize.apply(this);
      this.execRoute();
      return this;
    }

    Router.prototype.initialize = function() {};

    Router.prototype.routeToRegExp = function(route) {
      route = route.replace(this.escapeRegExp, '\\$&').replace(this.optionalParam, '(?:$1)?').replace(this.namedParam, '([^\/]+)').replace(this.splatParam, '(.*?)');
      return new RegExp('^' + route + '$');
    };

    Router.prototype.execRoute = function() {
      var path, route, _results;
      path = window.location.pathname.substring(this.rootURL.length+1);
      _results = [];
      for (route in this.routes) {
        if (this.routeToRegExp(route).test(path)) {
          var args = this._extractParameters(this.routeToRegExp(route), path);
          this[this.routes[route]].apply(this,args);
        }
      }
    };

    Router.prototype._extractParameters = function(route, fragment) {
      var params = route.exec(fragment).slice(1);
      return _.map(params, function(param) {
        return param ? decodeURIComponent(param) : null;
      });
    };

    return Router;

  })();

}).call(this);

Hi,
I've been looking a long time for at solution like this, thanks a lot, and it almost works:) I have an issue with the paths when they contain parameters ... eg. mysite.com/case/1232 and I refresh the page.

This is my markup:

 <ul>
            <li><a href="/">Index</a></li>    
            <li><a href="/cases/1232">Cases</a></li>    
            <li><a href="/about">About</a></li>    
            <li><a href="/contact">Contact</a></li>    
            <li><a href="http://www.contact.dk">External link</a></li>    
        </ul>

This is my JS:

var Routes = new (Backbone.Router.extend({
        routes:{
            '' : 'index',
            'about' : 'about',
            'cases/:id' : 'cases',
            'contact' : 'contact'
        },

        index:function(){
            console.log('index');
            $('#view').html('index');
        },

        cases:function(id){
            console.log('cases');
            $('#view').html('cases ' + id);
        },

        about:function(){
            console.log('about');
            $('#view').html('about');
        },

        contact:function(){
            console.log('contact');
            $('#view').html('contact');
        }
    }));


    $(document).ready(function(){
        Backbone.history.start({pushState:true})
    })

Have you got any idea why this does not work, when I add a parameter. Se an example
Thanks.