Backbone router

Question

I am trying to update the URL but not navigate the page when using tabs in backbone, so that a tab can be bookmarked, when I run this from my codebase it does nothing,

app.Router.navigate('groups/teams', { trigger:false });

however if I run it in my console, it changes the url from 'http://app.local/groups' to 'http://app.local/groups#groups/teams' why does it add #? I would like to update the URL to 'http://app.local/groups/teams'.

Am I using the Router incorrectly? My router is pretty simple,

        var app = app || {};

        var Router = Backbone.Router.extend({

        routes: {

            'groups' : 'groups'

        },

        groups: function() {
             alert("Groups");
        }

    });

    app.Router = new Router();

Have you started backbones history with `{pushState:true, hashChange:false}`? It sounds like you're using a browser that doesn't support push state. — David Barker, Aug 07 '14 at 09:11
Do you have a route for `groups/teams` or `groups/:something`? — cleaver, Aug 07 '14 at 15:15

score 0 · Answer 1 · answered Aug 08 '14 at 23:08

Normally when you have a URL like:

www.example.com/foo

the foo part is considered to indicate a resource called "foo" on the example.com server. So, if the client (ie. Javascript code) were to redirect the user to "www.example.com/bar", it wouldn't be able to do anything after that, because the browser will take the user to a new page entirely (with entirely new Javascript code).

Most, but not all, modern browsers have implemented a feature called pushstate which gets around this and allows the client to set the URL to "www.example.com/bar" without actually making the browser go back to the server and ask for that page. However, since not all browsers support pushstate, Backbone doesn't use it by default.

Instead Backbone takes advantage of an old piece of web technology: the anchor/hash (ie. www.example.com/#foo). If you don't want it to do that you have to pass pushState: true, hashChange: false options when you start your router. However, even if you do that Backbone will still fall back to hash-based navigation if the browser doesn't support pushstate, so there's no guarantee that it won't still do the "#bar" thing.

My advice would be to adjust to having all of your client-side routes be hash-based, but if you are certain that all of your users will use push-state-enabled browsers, you could use that approach. The browsers which support push state can be found here:

http://caniuse.com/#search=pushstate

Hope that helps.

score 0 · Answer 2 · edited Jan 02 '16 at 19:48

0

hash fragments (#page) were used to provide these permalinks, but with the arrival of the History API,

just set pushState ture:

Backbone.history.start({pushState: true, root: "/public/search/"})

edited Jan 02 '16 at 19:48

Flexo

87,323
22
191
272

answered Jan 02 '16 at 16:37

Simon

226
2
6

score 0 · Answer 3 · answered Jul 14 '16 at 13:41

0

Add this code to your router initialize: function

 $('body').delegate('a[href]:not([href^=\#])', 'click', function (e) {
       e.preventDefault();
   Backbone.history.navigate($(this).attr('href'), {trigger: true});

});

it work in my case

answered Jul 14 '16 at 13:41

V.S.V

302
2
20

Backbone router

3 Answers3