9

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

只是为了澄清，我不是在问如何进行骨干路由。我在问在进行主干路由时，如何捕捉导致 url 更改的按钮，是后退按钮还是前进按钮？

谢谢

4

1 回答 1

8

监听所有链接上的点击事件。（咖啡脚本）

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

或者，您可以拦截Backbone.history.navigate(). 如果有人点击它，这意味着他们不会返回，所以设置一个标志为true. 在您的路由器中也有一个事件来监听所有路由器事件。始终存储前一个片段 ( Backbone.history.getFragment())。将当前片段与前一个片段进行比较。如果它们相同，则检查该标志是否设置为trueor 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

如果您需要任何说明，请告诉我（我刚刚为我的应用程序实现了这个并且它有效）。

于 2012-07-26T01:13:17.343 回答