Selective history.back() using Backbone.js

问题

I have a Backbone app. I'm using Backbone.history to enable use of the back button. We have a page (settings) that auto loads a popup requiring input from the user. If the user chooses cancel, I want to go back to the previous page. I can do this using window.history.back().

The problem is, if the user went directly to that page (app#settings) from another url (like google) by typing the url into the browser, I want to redirect the user to the home page (app/) rather than going back to google.

I haven't been able to figure out any way to do this. Backbone.history looks like it store information from the browser's back button, so it has a history even if they just arrived at the app. I also couldn't find a way to view the previous url.

Is this possible?

回答1:

Wrap the back navigation logic in a method of your own. Perhaps on the router:

var AppRouter = Backbone.Router.extend({

  initialize: function() {
    this.routesHit = 0;
    //keep count of number of routes handled by your application
    Backbone.history.on('route', function() { this.routesHit++; }, this);
  },

  back: function() {
    if(this.routesHit > 1) {
      //more than one route hit -> user did not land to current page directly
      window.history.back();
    } else {
      //otherwise go to the home page. Use replaceState if available so
      //the navigation doesn't create an extra history entry
      this.navigate('app/', {trigger:true, replace:true});
    }
  }
});

And use the router method to navigate back:

appRouter.back();

回答2:

I used the same answer from jevakallio, but I had the same problem that commenter Jay Kumar had: The routesHit doesn't subtract so hitting appRouter.back() enough times will take the user out of the app, so I added 3 lines:

var AppRouter = Backbone.Router.extend({

  initialize: function() {
    this.routesHit = 0;
    //keep count of number of routes handled by your application
    Backbone.history.on('route', function() { this.routesHit++; }, this);
  },

  back: function() {
    if(this.routesHit > 1) {
      //more than one route hit -> user did not land to current page directly
      this.routesHit = this.routesHit - 2; //Added line: read below
      window.history.back();
    } else {
      //otherwise go to the home page. Use replaceState if available so
      //the navigation doesn't create an extra history entry
      if(Backbone.history.getFragment() != 'app/') //Added line: read below
        this.routesHit = 0; //Added line: read below
      this.navigate('app/', {trigger:true, replace:true});
    }
  }
});

And use the router method to navigate back:

appRouter.back();

Added lines:

1st one: Subtract 2 from routesHit, then when its redirected to the "back" page it'll gain 1 so it's actually like you did just a minus 1.

2nd one: if user is already at "home", there wont be a redirect so don't do anything to routesHit.

3rd one: If user is where he started and is being sent back to "home", set routesHit = 0, then when redirected to "home" routesHit will be 1 again.

来源：https://stackoverflow.com/questions/14860461/selective-history-back-using-backbone-js

标签

backbone.js

browser-history