9

私は backbone.js を使用してアプリを作成しており、ページ間でアニメーション化しています (iPhone スタイルの UI に少し似ています)。ボタンをクリックすると右から次のページがスライドインし、戻るボタンをクリックすると左から次のページがスライドインします。ルーターを使用して、ブラウザの進むボタンと戻るボタンで同じことができるようにしたいと考えています。アニメーションが正しい方向にあることを確認できるように、どちらが押されたか (前方または後方) を知ることはできますか?

明確にするために、バックボーン ルーティングの方法を尋ねているわけではありません。バックボーン ルーティングを行うときに、どのボタンが URL を変更したかを確認する方法を尋ねています。それは戻るボタンですか、それとも進むボタンでしたか?

ありがとう

4

1 に答える 1

8

すべてのリンクでクリック イベントをリッスンします。(コーヒースクリプト)

$(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

説明が必要な場合はお知らせください（アプリにこれを実装したところ、動作します）。

于 2012-07-26T01:13:17.343 に答える