Prevent navigating to another view if contents are unsaved

Question

We have a backbone.js app that displays a number of forms to the user. What we want is very simple: if the user goes to another page without saving the filled-in form, we want t

Answer 1

I've been dealing with this issue for a little while, and I've come up with a solution. I based my solution off this example.

The idea is to override the navigate method, and use jQuery deferred objects to wait to the appropriate time to navigate. In my case, if a user tried to navigate from my view that was dirty, a dialog needed to show that asked the user if:

1) Save the changes, then navigate 2) Don't save the changes, and navigate 3) Cancel the navigation and remain on the existing page

Below is my code for the navigate method in the Router:

navigate: function(fragment, trigger) {
    var answer,
          _this = this;

    answer = $.Deferred();
    answer.promise().then(function() {
        return Backbone.Router.prototype.navigate(fragment, trigger);
    });

    if(fragment !== undefined){     
        var splitRoute = fragment.split('/');
        app.currentPatronSection = splitRoute[splitRoute.length - 1];
    }

    if (app.recordChanged) {
        this.showConfirm(function(ans){
            // Clear out the currentView
            app.currentView = undefined;
            answer.resolve();
        }, function(){

        });
        return answer.promise();
    } else {
        return answer.resolve();
    }
    return Backbone.Router.prototype.navigate(fragment, trigger);

},

The showConfirm method presents the dialog with the three options I listed above. Based on the user's choice, I save the form, then resolve the answer to navigate, etc.