backbone.js router Pushstates & Root

Question

I have a page http://www.domain.com/user/123 , where 123 is the user_id for a particular user. There is a tabbed interface, and clicking on the tab should update the address bar with a new URL.

Example: Clicking on <a href="likes" data-toggle="tab">Likes</a> should update the address bar to http://www.domain.com/user/123/likes

Problem: I am trying to implement pushstates in backbone.js, but I can't seem to get the URL right when using app.navigate() . I tried setting the root attribute in the router using Backbone.history.start({ pushState: true, root: "/user/" }); which gives me the root as http://www.domain.com/user/ . How can I add the user_id to the end of root ? ie. http://www.domain.com/user/123/

//Router
var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'likes',
        'likes': 'likes',
    },

    likes: function() {
        console.log('fn likes');
        $('#tab_likes"').show();
    }
});

var app = new AppRouter();
Backbone.history.start({ pushState: true, root: "/user/" });

$(function() {
    // Update address bar URL
    $('a[data-toggle="tab"]').on('click', function(e) {
        app.navigate(e.target.getAttribute('href'));
    });

});

---

Updated Code

How can I update the root attribute of Backbone.history after grabbing the user_id from the url? The current method shown below does not work

// Router

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user_id/likes': 'likes',
        ':user_id/': 'likes'
    },

    set_user_id: function($user_id) {
        this.user_id = $user_id;
        // ADD SOME CODE TO CHANGE Backbone.history's root attribute
    },

    likes: function($user_id) {
        console.log('fn likes');
        this.set_user_id($user_id);
        $('#tab_likes"').show();
    }
});

var app = new AppRouter();
Backbone.history.start({ 
    pushState: true, 
    root: '/user/' + app.user_id + '/'  // app.user_id is undefined at the time this is called
});

Answer 1

You need to create your routes with a parameter to capture the variable user id, ie

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user/likes': 'likes',
    },

    likes: function(user) {
        console.log(user, 'fn likes');
        $('#tab_likes"').show();
    }
});

See the Backbone docs for more info. Needless to say that your href should be changed accordingly, ie href="123/likes" .

Finally, in order to not only save the url in history but also trigger the route you need to navigate as such:

app.navigate(e.target.getAttribute('href'), true);

Answer 2

navigate requires a trigger option to be set if you want it to actually fire the route handler (as opposed to just update the URL). From the documentation :

Whenever you reach a point in your application that you'd like to save as a URL, call navigate in order to update the URL. If you wish to also call the route function, set the trigger option to true.

So, to get the console.log debug to at least work, try this:

app.navigate(e.target.getAttribute('href'), true);