Silently change url to previous using Backbone.js

Question

Using Backbone.js, is it possible to make the router navigate to the page where it came from? I'd like to use that for the case where I change my URL when a popup appears, and I want go change it back, when I hide the popup. I don't want to simply go back, because I want to keep the background page in precisely the same position as I left it before I showed the popup

Answer 1

You can solve this problem by extending Backbone.Router and storing all the routes during navigation.

Click to copy

class MyRouter extends Backbone.Router
  constructor: (options) ->
    @on "all", @storeRoute
    @history = []
    super options

  storeRoute: ->
    @history.push Backbone.history.fragment

  previous: ->
    if @history.length > 1
      @navigate @history[@history.length-2], true 

Then, when you have to dismiss your modal, simply call the MyRouter.previous() method that it will redirect you back to the last "hash".

Answer 2

I think mateusmaso's answer is mostly right but requires some tweaks to guarentee that you always get the right URL you are looking for.

First you need to override the route method to have a beforeRoute method fire:

Click to copy

route: (route, name, callback) =>
   Backbone.Router.prototype.route.call(this, route, name, =>
     @trigger('beforeRoute')
     callback.apply(this, arguments)
   )

Then you bind the event and initialize the history instance variable:

Click to copy

initialize: (options) ->       
   @history = []
   @on "beforeRoute", @storeRoute

Next create helper methods for storing and retrieving the fragment:

Click to copy

storeRoute: =>
   @history.push Backbone.history.fragment

previousFragment: =>
   @history[@history.length-2]

Finally, you need one final helper method that can be used to change the URL without reloading and store the resulting fragment. You need to use this when closing the pop up or you won't have the expected fragment in your history if the user gets the pop up again without navigating anywhere else. This is because calling navigate without "trigger: true" won't trigger the event handler to store the fragment.

Click to copy

changeAndStoreFragment: (fragment) =>
   @navigate(fragment)
   @storeRoute()