Cuprins
Odată ce am definit ce router în aplicația noastră Backbone.js, trebuie să-l facem să asculte modificările adresei URL, atunci când utilizatorul nostru plasează o valoare cu hash-ul respectiv, de exemplu, aplicacion.com/#ruta Cu aceasta, pe lângă faptul că permite ascultarea, utilizatorul va putea, de asemenea, să semneze aplicația.Coloana vertebrală.istorie
După cum am explicat, acesta este elementul care face ca aplicația noastră să înceapă ascultați modificările adresei URL care iau hashurile, important este că ne ajută să putem crea o aplicație care poate avea secțiuni stocate ca marcator sau marcaj de către utilizator, creând astfel secțiuni care sunt accesate direct fără a fi nevoie să treacă prin multe probleme.
Cum se folosește?Pentru a utiliza Coloana vertebrală.istorie trebuie să o facem odată ce definim obiectul care ne inițializează router și pentru aceasta o facem Metoda .start ().
Să vedem în următorul cod cum ar fi această acțiune:
var myRouter = nou exempluRouter (); Backbone.history.start ();
În acest caz avem un Router numit exampleRouter care este atribuită variabilei miRouter, așa cum am indicat odată ce această acțiune este făcută este că folosim Metoda .start () după cum vedem în ultima linie a exemplului.
Dacă executăm următoarele Router Pe serverul nostru web putem vedea cum funcționează pentru noi ceea ce am explicat:
var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Am accesat testul routerului");}, căutare Întrebare: funcție (interogare, pagină) {var pagină_no = pagină || 1; consolă log ("Pagina nr:" + pagină_nu + " din căutarea care conține cuvântul: "+ interogare);}, defaultRoute: funcție (altele) {console.log ('Resursa:' + altele + 'Nu există');}}); var myRouter = nou exempluRouter (); Backbone.history.start ();
Să vedem în următoarea imagine cum se dovedește când accesăm calea de căutare și îi transmitem parametrii pe care îi dorim:
După cum putem vedea, funcția asociată rutei a fost executată cu succes.
Aceasta.metoda naviga
Această metodă este cea care ne permite actualizați adresa URL a aplicației dintr-o metodă, acest lucru ne ajută să evităm să reîncărcăm pagina și astfel să nu pierdem scopul unei singure aplicații de pagină, detaliul este că această metodă nu o face să treacă prin router, deci trebuie să o facem în mod explicit, să vedem exemplele:
1- Fără a trece prin router:
viewTask: function (id) {console.log ("Vizualizați sarcina solicitată."); this.navigate ("task /" + id + '/ edit'); // actualizați adresa URL, dar nu trece prin router},
2- Cu corecția care îl face să treacă prin router:
viewTask: function (id) {console.log ("Vizualizați sarcina solicitată."); this.navigate ("task /" + id + '/ edit', {trigger: true}); // actualizați adresa URL, dar nu trece prin router},
Cu aceasta, realizăm deja obiectivul din interiorul aplicației modificați adresa URL și imediat treceți direct prin router.
La sfârșitul acestui tutorial am văzut utilitatea de a putea accesa aplicația noastră prin adrese URL prietenoase, deoarece acest lucru ne ajută să o facem mai ușor de citit pentru motoarele de căutare și pentru utilizatori, îmbunătățind astfel SEO.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv