Question

My problem is:

All the HTML is in a <div id="application"> container, which by default has 0 opacity. This is because JavaScript does some DOM positioning, so when this is all done I just add a class="rendered" into the <div id="application>" and then the page appears.

So the thing is, for every route in my Backbone router, I need something that is always triggered before the actual routing, or on each route, is this possible?

Thanks for help!

Answer 1

Backbone.Router emits events when a route triggers, so you can either bind
to specific events or to all to capture all valid route changes. The event
argument will contain the route callback name:

var MyRouter = Backbone.Router.extend({
    routes: {
        "foo": "bar"
    },

    initialize: function() {
        this.on('all', function(routeEvent) {
            // If you had clicked #foo, routeEvent would contain
            // `route:bar`. You can trigger your CSS changes here.
        });
    }
});

I feel like this sort of code would be better off in a view, but this ought to
do what you ask for.