Implement setup and teardown functions for routes

[caseycesari]

As they are implemented now, route functions are responsible for cleaning up the previous route.

Ideally, before calling a route, the previous route could clean it self up, and any special things that aren't directly related to showing views for the next route could be called before launching that route.

As an example, the current implementation of the analyze route looks like this:

var AnalyzeController = {
    analyze: function() {
        if (!App.map.get('areaOfInterest')) {
            router.navigate('', { trigger: true });
            return false;
        }

        App.map.set('halfSize', true);

        var rootView = App.rootView,
            analyzeWindow = new views.AnalyzeWindow({
                id: 'analyze-output-wrapper'
            });

        rootView.footerRegion.show(analyzeWindow);
        rootView.geocodeSearchRegion.empty();
        rootView.drawToolsRegion.empty();
    }
};

Ideally, it would look something like this (as proposed by @kdeloach):

var DrawController = {
    ...
    tearDown: function() {
        rootView.geocodeSearchRegion.empty();
        rootView.drawToolsRegion.empty();
    }
    ...
}

var AnalyzeController = {
    setUp: function() {
        if (!App.map.get('areaOfInterest')) {
            router.navigate('', { trigger: true });
            return false;
        }

         App.map.set('halfSize', true);
    },

    tearDown: function() {
         rootView.footerRegion.empty();
    },

    analyze: function() {
        var rootView = App.rootView,
            analyzeWindow = new views.AnalyzeWindow({
                id: 'analyze-output-wrapper'
            });

        rootView.footerRegion.show(analyzeWindow);
    }
};

In this structure, before analyze is called, the previous route tearDown is called, then AnalyzeController.setup, then analyze.

The trouble is it's not so easy to implement this. You can override the router.execute, which is the function calls the route callback, but the only context you have is the function that is about to be called, and any arguments passed to the route.

It looks like Marionette.js v3.0 will include a different router that should make something like this easier.

In the meantime, how can we go about implementing this? Here are some things people have done for a similar problem.

[kdeloach]

I was able to come up with a few proof of concepts for this.

But there's a problem. The latest Backbone version (1.1.2) was released on Feb. 20, 2014. These proof of concepts rely on this fix which was not added until March 23, 2014. We can still work around this limitation by extending the Backbone router to include this fix in our code.

The following demonstrates a quick & easy way to extend the router to provide more context when switching between routes and implements basic setUp/tearDown methods.

http://jsfiddle.net/kdeloach/6c00wjae/

The following is a variation of the code above, but adds a promise chain to handle sequences of animation transitions.

http://jsfiddle.net/kdeloach/uhfsqm1e/

Check the developer tools console to see the logging statements.

[mmcfarland]

I like the promise based approach and I don't think adding the patch providing name to execute seems problematic at all.

[caseycesari]

Nice work! I also like the promise-based approach. It looks like a new version of backbone is imminent: jashkenas/backbone#3285

I think to do the animations though, we need to modify Region.show, and Region.show as done here. In the linked prototype, Region.show calls view.animateIn, and Region.empty calls view.animateOut.

Created #84 for discussion of animations.

[kdeloach]

For animated regions, could we instead render the views off-screen/hidden to start, and then let it handle its own animations onShow?