Q:

Backbone view not initialising correctly after back or forward button

So I have a single page backbone application which loads in new pages via AJAX and updates the URL using the history API. This all works fine but when I press the back button it just changes the URL back and does not load the previous AJAX.
So I have begun to fix this issue but I have a strange issue where the previous AJAX is called, loads in correctly but does not work because I get the following error:
this.el is undefined

I really do not know how to fix this, here is some of my code:
ContainerView = Backbone.View.extend({
el: 'body',
events: {
    'click .navigation-item': 'loadRequestedPage'
},
initialize: function() {
    this.listenTo(Backbone, 'popstate', this.onPopState);
},
onPopState: function(e) {
    var pageName = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1, window.location.pathname.lastIndexOf('php') + 3);
    $('.navigation-item[href="'+pageName+'"]').eq(0).click();
},
....
loadRequestedPage: function(e) {
    if (Modernizr.history) {
        e.preventDefault();

        var pageModel = myWebsite.where({pageID: currentPage})[0],
            requestedPageID = $(e.currentTarget).data('page-id'),
            requestedPageModel = myWebsite.where({pageID: requestedPageID})[0],
            requestedPageUrl = requestedPageModel.get('pageUrl'),
            $targetElement = this.determineTargetElement(requestedPageID);

        this.closeMobileNavigation();

        this.loadNewPage(requestedPageModel, requestedPageUrl, requestedPageID, $targetElement);

        this.setActiveNavItem(requestedPageUrl);
        this.updateCurrentPage(requestedPageID);
        this.gaTrackEvent('Page Navigation', requestedPageUrl, 'User used the main navigation to navigate to' + requestedPageUrl);
    }
},

The functions inside of loadRequestedPage then go on to trigger the history.pushstate which then triggers the backbone.router and finally starts the requred view.
It works fine when clicking a .navigation-item manually but not when i trigger it through JS after click a back button.
If anyone can help that would be awesome.
Thanks.
EDIT
Here is my router
var app = app || {};

(function($) {

    var Router = Backbone.Router.extend({
        routes: {
            '': 'instantiateHome',
            'index.php': 'instantiateHome',
            'our-approach.php': 'instantiateOurApproach',
            'our-work.php': 'instantiateOurWork',
            'people.php': 'instantiatePeople',
            'social.php': 'instantiateSocial',
            'contact-us.php': 'instantiateContactUs',
            "*notFound" : 'notFound'
        },
        instantiateHome: function() {    
            if(app.home_view == null) {
                app.home_view = new app.HomeView();
            }
        },
        instantiateOurApproach : function() {
            if(app.our_approach_view == null) {
                app.our_approach_view = new app.OurApproachView();
            }
        },
        instantiateOurWork: function() {
            if(app.our_work_view == null) {
                app.our_work_view = new app.OurWorkView();
            }
        },
        instantiatePeople: function() {
            if(app.people_view == null) {
                app.people_view = new app.PeopleView();
            }
        },
        instantiateSocial: function() {
            if(app.social_view == null) {
                app.social_view = new app.SocialView();
            }
        },
        instantiateContactUs: function() {
            if(app.contact_us_view == null) {
                app.contact_us_view = new app.ContactUsView();
            }

        },
        notFound: function() {
            if(app.not_found_view == null) {
                app.not_found_view = new app.NotFoundView();
            }

        }
    });

    app.router = new Router();

    var location_pathname = window.location.pathname;
    var site_url = location_pathname.replace(location_pathname.split("/").pop(),"");
    var urlArray = location_pathname.split("/");
    var pageUrl = urlArray[urlArray.length-1];
    if (Modernizr.history) {
        Backbone.history.start({pushState: true, root: site_url});
    } else {
        Backbone.history.start({hashChange: false, root: site_url});
    }

    app.router.navigate(pageUrl, {trigger: true});

})(jQuery);

EDIT
SO I have worked out that pressing the back button triggers the router without having to do the following code:
app.router.navigate(pageUrl, {trigger: true});

Usually I run the above code after the AJAX call is complete so I know all elements are on the page before the new view is instantiated.
So I guess my question is now: How do I stop the back button from triggering the router?
EDIT
New router code to be dependent on ajaxComplete()
instantiateOurWork: function() {
    if (app.ajaxActive) {
        $(document).ajaxComplete(function() {
            if(app.our_work_view == null) {
                app.our_work_view = new app.OurWorkView();
                $(document).unbind('ajaxComplete');
            }
        });
    } else {
        if(app.our_work_view == null) {
            app.our_work_view = new app.OurWorkView();
        }
        app.ajaxActive = true;
    }
},

This is really messy code but I don't know how else to do it.

A:

OK so I have figure it out, it is not a pretty sight but I am not sure how else I can do it.
Firstly I needed to make sure all ajax calls had ended before I started loading new views, this would prevent multiple views existing at any one time and stop any JS errors, this was done from the following code which can also be found in one of my edits above:
instantiateOurWork: function() {
    if (app.ajaxActive) {
        $(document).ajaxComplete(function() {
            if(app.our_work_view == null) {
                app.our_work_view = new app.OurWorkView();
                $(document).unbind('ajaxComplete');
            }
        });
    } else {
        if(app.our_work_view == null) {
            app.our_work_view = new app.OurWorkView();
        }
        app.ajaxActive = true;
    }
},

app.ajaxActive is a global variable which is set to false by default, this is because the initial page load does not execute an AJAX call, then it is set to true, this means that it will always expect an AJAX call to be running and wait for it to finish using the ajaxComplete function.
The next problem I had to deal with was terminating code which is running in the background, things like getScript() and $.each loops which would cause errors as they would try to run after the view had been removed.
To fix this I had to implement the local variable this.stopExecution which was set to false by default.
When my this.removeView() function was called this.stopExecution would be set to true.
Then inside of any code which could possibly run after the view has been removed I added the following code:
if(self.stopExecution) {
    return false;
}

which would stop the code from running and prevent any errors.
If anyone has a better solution please feel free to share.
Thanks.

