How to get this backbone route to work?

Question

CI'm having problems with making one route works. I have list view with items, single item html looks like this:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#my_clients/1486" class="ui-link-inherit">    
  <h4 class="ui-li-heading">number/h4>
  <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">A</span>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>

my router code:

var AppRouter = Backbone.Router.extend({

    routes:{
        "": "login",
        "login": "login",
        "my_clients": "myClients",
        "my_clients/:id": "myClientDetails" 

    },

    initialize:function () {
        // Handle back button throughout the application
        $('.back').live('click', function(event) {
            window.history.back();
            return false;
        }); 
        this.firstPage = true;
    },

    login: function () {            
        this.changePage(new LoginView({ model: new User() }));
    },

    myClients: function() {     
        this.changePage(new MyClientsView({ model: new MyClientsCollection() }));
    },

    myClientDetails: function(id) {
        var client = new Client({ id: id });
        self = this;
        client.fetch({
            success: function(data) {
                self.changePage(new MyClientDetailsView({ model: data }));
            }
        });
    },

    changePage:function (page) {
        $(page.el).attr('data-role', 'page');
        page.render();
        $('body').append($(page.el));
        var transition = $.mobile.defaultPageTransition;
        // We don't want to slide the first page
        if (this.firstPage) {
            transition = 'none';
            this.firstPage = false;
        }
        $.mobile.changePage($(page.el), {changeHash:false, transition: transition});
    }

});

Login and MyClients pages works ok, but when I click on link in list view item to show individual client details I see get call in my firebug console and route is not working.

What am I missing?

Answer 1

Change <a href="#my_clients/1486"...> to <a href="#/my_clients/1486"...> (in other words, add / after #). See the example: http://jsfiddle.net/theotheo/sz6y8/