backbone.js - Backbone 路由检测向前或向后按下

Question

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

只是为了澄清，我不问如何进行 Backbone 路由。我问做 Backbone 路由时，如何捕获导致URL更改的按钮，是后退按钮还是前进按钮？

谢谢

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

让我知道您是否需要任何澄清(我刚刚为我的应用程序实现了该功能，并且可以正常运行)。