骨干路由检测是否向前或向后按压

Question

我正在使用backbone.js编写应用程序,并在页面之间进行动画制作(有点像iphone样式ui).因此,当您单击按钮时,下一页将从右侧滑入,单击后退按钮将使下一页从左侧滑入.我希望能够使用路由器对浏览器前进和后退按钮执行相同的操作.是否可以分辨出哪个被按下(向前或向后)以便我可以确保动画的方向正确？

只是为了澄清,我不是在问骨干路由.我在问骨干路由时,你怎么能抓住哪个按钮导致网址改变,是后退按钮还是前进按钮？

谢谢

Answer 1

在所有链接上收听点击事件.(CoffeeScript的)

$(document).on 'click', 'a' ->
  window.linkClicked = true

或者,你可以拦截Backbone.history.navigate().如果有人点击它,这意味着他们不会返回,所以设置一个标志true.您的路由器中还有一个事件可以侦听所有路由器事件.始终存储前一个片段(Backbone.history.getFragment()).将当前片段与先前片段进行比较.如果它们相同,则检查该标志是否设置为true或false.如果设置为false,那么你知道它已经回来了,如果true那时它不是,并且有人点击链接但是来到同一个上一页.最后,将此标志重置为false.

class SnazzyRouter extends Backbone.Router
    initialize: ->
      # This gets triggered everytime a route event gets triggered
      @on 'all', =>
          currentFragment = Backbone.history.getFragment()
          window.backDetected = false  # assume no back detected

          if !window.linkClicked and currentFragment == window.previousFragment
              window.backDetected = true

          window.linkClicked = false  # reset
          window.previousFragment = currentFragment

window.linkClicked = false
window.backDetected = false
window.previousFragment = null

snazzyRouter = new SnazzyRouter()

现在,这很简单

# Did we go back?
console.log "I CAN'T BELIEVE WE WENT BACK!" if window.backDetected

如果您需要任何澄清,请告诉我(我刚刚为我的应用程序实现了这个功能).