Spisie treści
Po określeniu tego, co router w naszej aplikacji Backbone.js, musimy sprawić, aby nasłuchiwał zmian w adresie URL, wtedy nasz użytkownik umieszcza wartość z odpowiednim hashem, na przykład, applicacion.com/#ruta Dzięki temu, oprócz umożliwienia słuchania, użytkownik będzie mógł również dodać zakładkę do aplikacji.Backbone.historia
Jak już wyjaśnialiśmy, jest to element, który sprawia, że nasza aplikacja zaczyna słuchaj zmian w adresie URL, biorąc skróty, ważne w tym jest to, że pomaga nam również tworzyć aplikację, która może mieć sekcje przechowywane jako znacznik lub zakładka przez użytkownika, tworząc w ten sposób sekcje, do których można uzyskać bezpośredni dostęp, bez konieczności przechodzenia przez wiele problemów.
Jak używać?Aby użyć Backbone.historia musimy to zrobić, gdy zdefiniujemy obiekt, który inicjuje nasz router i w tym celu robimy to .start () metoda.
Zobaczmy w poniższym kodzie, jak wyglądałaby ta akcja:
var myRouter = nowy przykładRouter (); Backbone.historia.start ();
W tym przypadku mamy Router zwany przykładRouter która jest przypisana do zmiennej miRouter, jak wskazaliśmy po wykonaniu tej akcji, używamy .start () metoda jak widzimy w ostatnim wierszu przykładu.
Jeśli wykonamy następujące czynności Router Na naszym serwerze internetowym możemy zobaczyć, jak to, co wyjaśniliśmy, działa dla nas:
var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Uzyskaliśmy dostęp do testu routera");}, searchQuestion: function (zapytanie, strona) {var page_no = page || 1; console.log ("Strona nr:" + page_no + " z wyszukiwania zawierającego słowo:" + zapytanie);}, defaultRoute: function (other) {console.log ('Zasób:' + other + 'Nie istnieje');}}); var myRouter = nowy przykładRouter (); Backbone.historia.start (); Zobaczmy na poniższym obrazku, jak się okazuje, gdy uzyskujemy dostęp do ścieżki wyszukiwania i przekazujemy jej żądane przez nas parametry:
This.navigate metoda
Ta metoda jest tą, która nam pozwala zaktualizować adres URL aplikacji z metody, pomaga nam to uniknąć konieczności ponownego ładowania strony, a tym samym nie tracić celu aplikacji jednostronicowej, szczegół jest taki, że ta metoda nie powoduje przejścia przez router, więc musimy to zrobić jawnie, zobaczmy przykłady:
1- Bez przechodzenia przez router:
viewTask: function (id) {console.log ("Wyświetl żądane zadanie."); this.navigate („zadanie /” + identyfikator + „/edytuj”); // zaktualizuj adres URL, ale nie przechodzi przez router}, 2- Z poprawką, która sprawia, że przechodzi przez router:
viewTask: function (id) {console.log ("Wyświetl żądane zadanie."); this.navigate ("zadanie /" + id + '/ edytuj', {wyzwalacz: prawda}); // zaktualizuj adres URL, ale nie przechodzi przez router}, Dzięki temu osiągamy cel już z poziomu aplikacji zmień adres URL i od razu przejść bezpośrednio przez router.
Na końcu tego samouczka zobaczyliśmy użyteczność możliwości dostępu do naszej aplikacji za pomocą przyjaznych adresów URL, ponieważ pomaga nam to uczynić ją bardziej czytelną dla wyszukiwarek i użytkowników, poprawiając w ten sposób SEO.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
