Search code examples
backbone.js

Backbone.js history 'on route change' event?


Is there a general event that fires every time we navigate to a different URL?

window.App =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}

  init: ->
    # Initialize Routers
    new App.Routers.Main()

    # Initialize History
    Backbone.history.start(pushState: true)

    # BIND VIEW CHANGE?
    $(@).on 'changeOfRoute', -> 
      console.log "Different Page" 

$(document).ready ->
  App.init()

Doing this per view is possible, but I'm looking for a general solution.


Solution

  • There is the "route" event on the Router:

    http://backbonejs.org/#Events-catalog

    • "route" (router, route, params) — Fired by history (or router) when any route has been matched.

    This allows you to bind to specific routes.

    If you want to fire a handler after any route, bind to "route", and the route will be the first argument:

    myRouter.on("route", function(route, params) {
        console.log("Different Page: " + route);
    });
    

    This will only trigger events for your explicitly defined routes. If you want to trigger events for routes that are not explicitly defined, then add a 'splat' route as per How to detect invalid route and trigger function in Backbone.Controller