CODEWITHSUNDEEP
backbone.js
bluedevil2k
bluedevil2k

Reputation: 9491

Backbone Router - Browser Back Button Not Triggering Router Methods

I have a Backbone Router set up that seemingly works - the routes get triggered properly, the views update, etc. However, when I press the browser's "Back" button, the routes aren't triggered at all. Also, typing in a URL into the browser doesn't trigger the routers either. Is there some step I'm missing to bind the browser specific things to Backbone (Firefox 11).

Setup

var messageRouter = new MessageRouter({view: messageListView});
Backbone.history.start();

Trigger

Backbone.history.navigate("#/view/" + $(this).data("filter-type"), {trigger: true});

Router Code

var MessageRouter = Backbone.Router.extend({

    view : null, /* should always be overridden */

    initialize : function(options)
    {
        this.view = options.view;
    },

    routes : {
        "" : "default",
        "/view/:filter" : "filter",
        "camera" : "camera"
    },

    default : function() {
    },

    filter : function(filterString) {
        this.view.setFilter(filterString);
        this.view.rerender();
    },

    camera : function(cameraString) {
    }

});

Upvotes: 13

Views: 5956

Answers (3)

Matthew Yang
Matthew Yang

Reputation: 625

this may be too late..but I had the exact same problem, and it turns out I accidently unbinded all events from window object, and that Backbone history was listening to events on window

Upvotes: 1

Toddish
Toddish

Reputation: 516

It might be the word default that's messing it up as it's a reserved word.

Either put quotes around the key 'default' in MessageRouter, or call it something else, like 'defaultRoute'. 

'default': function() {},
defaultRoute: function() {}

http://jsfiddle.net/uwjDq/2/ -Seems to work OK here, including using the back button.

Upvotes: 1

Martin Borthiry
Martin Borthiry

Reputation: 5326

You should call router.navigate using the same path that you had already defined. ie:

trigger

messageRouter.navigate("/view/" + $(this).data("filter-type"), {trigger: true});

router

 routes : {
        "" : "default",
        "/view/:filter" : "filter",
        "camera" : "camera"
    },

Upvotes: 1

Related Questions