How to fix the Back Button Behavior (should be clicked Twice) in backnone?

Question

I am working on a backbone application with multiple views. The navigation between the view is done by calling router.navigate('view', {trigger:true, replace:false}). I have a login page that has it own structure and the other views has another structure (very different). When I click on the login button the view changes along with the hash. The problem is when I click on the back button of the browser it doesn't go back to the login page but load the home page again, then I am required to click again on the back button in order to go back to the login page. In addition, when navigating to other pages sometimes the view handler isn't called when I click on the back button. I always use the router.navigate('view', {trigger:true, replace:false}) function to navigate between the views. Here is my Router :

define([ "jquery", "backbone", 'views/header', 'views/sidePanel' ], function($,
        Backbone, Header, sidePanel) {
    var ApplicationRouter = Backbone.Router.extend({
        _header : null,
        _sidePanel : null,
        routes : {
            "" : "login",
            "home" : "home",
            "perspectives" : "perspectives"
        },
        initialize : function() {
            this.firstPage = true;
            Backbone.history.start();
        },
        login : function() {
            var self = this;
            require([ 'views/loginPageView' ], function(loginView) {
                self.changePage(new loginView(), true);
            });
        },
        home : function() {
            var self = this;
            require([ 'views/homePageView' ], function(homeView) {
                self.changePage(new homeView(), false);
            });
        },
        perspectives : function() {
            var self = this;
            require([ 'views/treePerspectivesView' ],
                    function(perspectivesView) {
                        self.changePage(new perspectivesView(), false);
                    });
        },
        changePage : function(page, noPanel) {
            var deferred = $.Deferred();
            console.log(page);
            $page = $(page.el);
        if (this.firstPage) {
                if (!noPanel) {
                    self._sidePanel = new sidePanel({
                        el : ".left_col"
                    });
                    self._header = new Header({
                        el : '.top_nav' 
                    })
                    $page.attr('class', 'right_col');
                    $page.attr('role', 'main');
                    $('.main_container').append($page);

                } else {
                    $('body').append($page);
                }
                page.render();

            } else {
                if (!noPanel) {
                    $('.right_col').remove();
                    $('.right_col').unbind();
                    $page.attr('class', 'right_col');
                    $page.attr('role', 'main');
                    $('.main_container').append($page);

                }else{
                    $('body').html($page);
                }
                page.render();
            }
            if (this.firstPage) {
                this.firstPage = false;
            }
            deferred.resolve();
            return deferred;
        }

    });

    return ApplicationRouter;
})

This is how I navigate to the home view :

login:function(){
                console.log("Login Clicked");
                this.remove();
                this.unbind();
                router.fromBack=true;
                router.navigate('home', {trigger: false, replace: false});
                //router.home();
            },

Is there a better way to navigate between the views to fix this problem (Maybe calling the changePage function with the has as a parameter) ?

How t fix the issue of the Back Button ?

Thank You.

Answer 1

I'd recommend you to use the count navigation hits for a router. Also you should create a back route for this job. Like this:

AppRouter.prototype.initialize = function() {
  this.routesHits = 0;
  Backbone.history.on('route', (function() {
    this.routesHit++;
  }), this);
};

AppRouter.prototype.back = function() {
  if (this.routesHits > 1) {
    this.routesHits = this.routesHits - 2;
    window.history.back();
  } else {
    if (Backbone.history.getFragment() !== '/app') {
      this.routesHits = 0;
    }
    this.navigate('/', {
      trigger: true,
      replace: true
    });
  }
};

Your changePage function:

// ...
changePage : function(page, noPanel) {
  this.routesHit++;
  // ...
}

And for using go back functionality you can use your back function:

appRouter.back()

For using this approach you should use a singleton object of the AppRouter.