2012-04-23 16 views
9

Piszę aplikację za pomocą backbone.js i animuję między stronami (trochę jak ui stylu iphone). Kiedy klikniesz przycisk, następna strona zostanie przesunięta z prawej strony, a kliknięcie przycisku wstecz spowoduje przejście do następnej strony od lewej. Chcę móc zrobić to samo za pomocą przycisków przewijania do przodu i tyłu przeglądarki, używając routera. Czy można powiedzieć, który przycisk został naciśnięty (do przodu lub do tyłu), aby upewnić się, że animacja jest we właściwym kierunku?routing kręgosłupa wykrywanie, czy do przodu czy do tyłu wciśnięty

Po to, by wyjaśnić, nie pytam, jak wykonać routing kręgosłupa. Pytam podczas rutowania kręgosłupa, jak można sprawdzić, który przycisk spowodował zmianę adresu URL, czy był to przycisk Wstecz lub Przód?

Dzięki

Odpowiedz

8

Słuchaj za zdarzenie click na wszystkich połączeniach. (Coffeescript)

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

Alternatywnie, można przechwycić Backbone.history.navigate(). Jeśli ktoś kliknie, oznacza to, że nie wróci, więc ustaw flagę na true. Również zdarzenie w routerze nasłuchuje wszystkich zdarzeń routera. Zawsze przechowuj poprzedni fragment (Backbone.history.getFragment()). Porównaj bieżący fragment z poprzednim fragmentem. Jeśli są takie same, sprawdź, czy ta flaga została ustawiona na true lub false. Jeśli ustawione na false, to wiesz, że wrócił, jeśli true to nie jest i że ktoś kliknął link, ale doszedł do tej samej poprzedniej strony. Na koniec zresetuj tę flagę do 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() 

Teraz to prosta

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

Daj mi znać, jeśli potrzebujesz żadnych wyjaśnień (I właśnie wdrożone to dla mojej aplikacji i działa).

+0

Nie sądzę, że to naprawdę odpowiada na pytanie; szukał przycisków wstecz/przodu przeglądarki. – mix3d

+0

'if! Window.linkClicked and currentFragment == window.previousFragment' ten kod zakończy się niepowodzeniem, jeśli użytkownik kliknie i przytrzyma przycisk Wstecz i wybierze wpis _older_. –

Powiązane problemy