Innehållsförteckning
När vi har definierat vad router i vår app Backbone.js, vi måste få den att lyssna efter ändringar i URL: en, det är när vår användare placerar ett värde med sin respektive hash till exempel, aplicacion.com/#ruta Med detta kommer användaren, förutom att kunna lyssna, också att bokmärka applikationen.Ryggradshistoria
Som vi förklarade är det här elementet som får vår applikation att börja lyssna efter förändringar i webbadressen som tar hash, det viktiga med detta är att det också hjälper oss att kunna göra en applikation som kan ha sektioner som lagras som markör eller bokmärke av användaren, och skapar därmed avsnitt som nås direkt utan att behöva gå igenom många problem.
Hur man använder?Att använda Ryggradshistoria vi måste göra det när vi definierar objektet som initierar vårt router och för detta gör vi det .start () -metod.
Låt oss se i följande kod hur denna åtgärd skulle vara:
var myRouter = nytt exempelRouter (); Backbone.history.start ();
I det här fallet har vi en Router kallad exempelRouter som är tilldelad variabeln miRouter, som vi indikerade när denna åtgärd är klar är att vi använder .start () -metod som vi ser i den sista raden i exemplet.
Om vi utför följande Router I vår webbserver kan vi se hur det vi har förklarat fungerar för oss:
var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Vi har kommit åt routertestet");}, searchQuestion: function (fråga, sida) {var page_no = page || 1; console.log ("Sidnr:" + page_no + " från sökningen som innehåller ordet: " + fråga);}, defaultRoute: function (annat) {console.log ('Resursen:' + annat + 'Finns inte');}}); var myRouter = nytt exempelRouter (); Backbone.history.start ();
Låt oss se i följande bild hur det blir när vi kommer åt sökvägen och skickar det till de parametrar vi vill ha:
Som vi kan se har funktionen som är associerad med rutten genomförts.
Denna. Navigera metod
Denna metod är den som tillåter oss uppdatera programadressen från en metod, detta hjälper oss att undvika att behöva ladda om sidan och därmed inte förlora syftet med en enda sidapplikation, detaljen är att denna metod inte får den att gå igenom routern, så vi måste göra det uttryckligen, låt oss se exemplen:
1- Utan att gå igenom router:
viewTask: function (id) {console.log ("Visa den begärda uppgif.webpten."); this.navigate ("task /" + id + ' / edit'); // uppdatera webbadressen men den går inte via routern},
2- Med den korrigering som gör att den går igenom router:
viewTask: function (id) {console.log ("Visa den begärda uppgif.webpten."); this.navigate ("task /" + id + ' / edit', {trigger: true}); // uppdatera webbadressen men den går inte via routern},
Med detta uppnår vi redan målet inifrån applikationen ändra webbadress och genast gå igenom routern direkt.
I slutet av denna handledning såg vi nyttan av att kunna komma åt vår applikation via vänliga URL: er, eftersom detta hjälper oss att göra det mer läsbart för sökmotorer och för användare, vilket förbättrar SEO.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng