Sommario
Una volta che abbiamo definito cosa router nella nostra app Backbone.js, dobbiamo farlo ascoltare per le modifiche nell'URL, questo è quando il nostro utente inserisce un valore con il rispettivo hash, ad esempio, aplicacion.com/#ruta Con questo, oltre ad abilitare l'ascolto, l'utente potrà anche aggiungere un segnalibro all'applicazione.Backbone.storia
Come abbiamo spiegato, questo è l'elemento che fa partire la nostra applicazione ascolta i cambiamenti nell'URL prendendo gli hash, l'importante è che ci aiuti anche a creare un'applicazione che può avere sezioni che vengono archiviate come marcatore o segnalibro dall'utente, creando così sezioni a cui si accede direttamente senza dover affrontare molti problemi.
Come usare?Per usare il Backbone.storia dobbiamo farlo una volta definito l'oggetto che inizializza il nostro router e per questo lo facciamo attraverso metodo .start().
Vediamo nel codice seguente come sarebbe questa azione:
var myRouter = new exampleRouter (); Backbone.history.start ();
In questo caso abbiamo un Router chiamata esempioRouter che è assegnato alla variabile miRouter, come abbiamo indicato una volta eseguita questa azione è che usiamo il metodo .start() come si vede nell'ultima riga dell'esempio.
Se eseguiamo quanto segue Router Nel nostro web server possiamo vedere come funziona per noi ciò che abbiamo spiegato:
var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Abbiamo effettuato l'accesso al test del router");}, searchQuestion: function (query, page) {var page_no = page || 1; console.log ("The page no:" + page_no + " dalla ricerca che contiene la parola:" + query);}, defaultRoute: function (other) {console.log ('La risorsa:' + other + 'Non esiste');}}); var myRouter = new exampleRouter (); Backbone.history.start (); Vediamo nell'immagine seguente come va a finire quando accediamo al percorso di ricerca e gli passiamo i parametri che vogliamo:
Questo metodo.navigate
Questo metodo è quello che ci permette aggiorna l'URL dell'applicazione da un metodo, questo ci aiuta ad evitare di dover ricaricare la pagina e quindi non perdere lo scopo di un'applicazione a pagina singola, il dettaglio è che questo metodo non la fa passare attraverso il router, quindi dobbiamo farlo esplicitamente, vediamo gli esempi:
1- Senza passare dal router:
viewTask: function (id) {console.log ("Visualizza l'attività richiesta."); this.navigate ("attività /" + id + '/modifica'); // aggiorna l'URL ma non passa attraverso il router}, 2- Con la correzione che lo fa passare attraverso il router:
viewTask: function (id) {console.log ("Visualizza l'attività richiesta."); this.navigate ("attività /" + id + '/ modifica', {trigger: true}); // aggiorna l'URL ma non passa attraverso il router}, Con questo raggiungiamo già l'obiettivo dall'interno dell'applicazione cambia URL e subito passare direttamente al router.
Alla fine di questo tutorial abbiamo visto l'utilità di poter accedere alla nostra applicazione tramite URL amichevoli, poiché questo ci aiuta a renderlo più leggibile per i motori di ricerca e per gli utenti, migliorando così il SEO.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
