BackboneJS Routing

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.

fguillen · Accepted Answer · 2012-08-21T07:53:31.077

3

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.

edited Aug 21 '12 at 07:53

answered Aug 20 '12 at 21:05

fguillen

36,125
23
149
210

There's also a good example of this in Tim Branyen's backbone-boilerplate using a `data-bypass` attribute: https://github.com/tbranyen/backbone-boilerplate/blob/master/app/main.js#L22 – Chris Salzberg Aug 20 '12 at 23:50

score 1 · Answer 2 · answered Aug 20 '12 at 21:03

1

Try setting your anchor tag as follows:

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

Note the hash (#)

answered Aug 20 '12 at 21:03

Greg Ross

3,479
2
27
26

BackboneJS Routing

2 Answers2

Update