Backbone.js - Geschiedenis

Inhoudsopgave
Als we eenmaal hebben gedefinieerd wat de router in onze app Backbone.js, we moeten het laten luisteren naar wijzigingen in de URL, dit is wanneer onze gebruiker bijvoorbeeld een waarde plaatst met zijn respectieve hash, aplicacion.com/#ruta Hiermee kan de gebruiker niet alleen luisteren, maar ook een bladwijzer maken voor de toepassing.
Ruggengraat.geschiedenis
Zoals we hebben uitgelegd, is dit het element waardoor onze applicatie begint te luister naar veranderingen in de url die de hashes gebruikt, het belangrijkste hiervan is dat het ons ook helpt om een ​​applicatie te kunnen maken die secties kan hebben die zijn opgeslagen als markeerstift of bladwijzer door de gebruiker, waardoor secties worden gecreëerd die direct toegankelijk zijn zonder veel problemen te hoeven doorstaan.
Hoe te gebruiken?Om de . te gebruiken Ruggengraat.geschiedenis we moeten het doen zodra we het object hebben gedefinieerd dat onze . initialiseert router en hiervoor doen we het door .start () methode.
Laten we in de volgende code kijken hoe deze actie zou zijn:
 var myRouter = nieuw voorbeeldRouter (); Ruggengraat.geschiedenis.start (); 

In dit geval hebben we een Router genaamd voorbeeldRouter die is toegewezen aan de variabele miRouter, zoals we hebben aangegeven zodra deze actie is voltooid, is dat we de . gebruiken .start () methode zoals we zien in de laatste regel van het voorbeeld.
Als we het volgende uitvoeren: Router In onze webserver kunnen we zien hoe wat we hebben uitgelegd voor ons werkt:
 var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("We hebben toegang tot de routertest");}, searchQuestion: function (query, page) {var page_no = page || 1; console.log ("The page no:" + page_no + " van de zoekopdracht die het woord bevat:" + query);}, defaultRoute: function (other) {console.log ('The resource:' + other + 'Bestaat niet');}}); var myRouter = nieuw voorbeeldRouter (); Ruggengraat.geschiedenis.start (); 

Laten we in de volgende afbeelding zien hoe het uitpakt wanneer we het zoekpad openen en het de gewenste parameters doorgeven:

Zoals we kunnen zien, is de functie die aan de route is gekoppeld, met succes uitgevoerd.
Deze.navigatiemethode
Deze methode is degene die ons in staat stelt update de applicatie-URL van een methode, dit helpt ons om te voorkomen dat we de pagina opnieuw moeten laden en dus niet het doel van een enkele paginatoepassing verliezen, het detail is dat deze methode het niet door de router laat gaan, dus we moeten het expliciet doen, laten we de voorbeelden bekijken:
1- Zonder door de te gaan router:
 viewTask: function (id) {console.log ("Bekijk de gevraagde taak."); this.navigate ("task /" + id + '/ edit'); // update de URL maar deze gaat niet via de router}, 

2- Met de correctie die ervoor zorgt dat het door de gaat router:
 viewTask: function (id) {console.log ("Bekijk de gevraagde taak."); this.navigate ("task /" + id + '/ edit', {trigger: true}); // update de URL maar deze gaat niet via de router}, 

Hiermee bereiken we de doelstelling al vanuit de applicatie verander url en ga direct door de router.
Aan het einde van deze tutorial zagen we het nut van toegang tot onze applicatie via gebruiksvriendelijke URL's, omdat dit ons helpt om het leesbaarder te maken voor zoekmachines en voor gebruikers, waardoor de SEO.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven
wave wave wave wave wave