Question

My app’s index page is at http://cms/admin (I’m on localhost). On the index page there is only one a element:

<a href="/admin/test">deneme</a>

When i click on the link it goes to /cms/admin/test

I want to use BackboneJS’s routing mechanism to convert my app to ajax friendly app but i can’t do it until now. Here is my JS code:

$(function() {
    var AppRouter = Backbone.Router.extend({
        routes: {
            "test": "defaultRoute"
        },

        defaultRoute: function() {
            console.log('its here');
        }
    });

    var appRouter = new AppRouter();

    Backbone.history.start({
        pushState: true,
        slient: true,
        root: '/admin/'
    });
});

When i run the page and click the link, it doesn’t log anything to console and browser follows the link. After page loads, it logs “its here” message.

I already tried it without the root param, “/admin/test” instead of “test”. i tried every combination of: “test”, “/test”, “test/”, “/admin/test”, “admin/test” etc..

Thanks.

Answer 1

You have to override the default behavior of the link.

You have to move between pages explicitly calling appRouter.navigate("test", {trigger: true});. So try to capture the click event over your link within a View.events, prevent the default behavior of the link and call appRouter.navigate()

Update

Also you can do it this in a batch:

$("a.bb_link").each( function( index, link ){
  $(link).click( function( event ){
    event.preventDefault();
    appRouter.navigate( $(this).attr( "href" ), {trigger: true} );
  });
});​

Every link with class bb_link will be using the Backbone.Router.