Table des matières
Une fois que nous avons défini ce que routeur dans notre application Backbone.js, nous devons lui faire écouter les changements dans l'URL, c'est lorsque notre utilisateur place une valeur avec son hachage respectif par exemple, aplicacion.com/#ruta Avec cela, en plus de permettre l'écoute, l'utilisateur pourra également mettre en signet l'application.Backbone.history
Comme nous l'avons expliqué, c'est l'élément qui fait que notre application commence à écouter les changements dans l'url en prenant les hachages, l'important à ce sujet est que cela nous aide également à pouvoir créer une application qui peut avoir des sections qui sont stockées en tant que marqueur ou alors signet par l'utilisateur, créant ainsi des sections auxquelles on accède directement sans avoir à passer par de nombreux problèmes.
Comment utiliser?Pour utiliser le Backbone.history nous devons le faire une fois que nous avons défini l'objet qui initialise notre routeur et pour cela nous le faisons à travers méthode .start().
Voyons dans le code suivant comment cette action serait :
var myRouter = new exampleRouter (); Backbone.history.start ();
Dans ce cas, nous avons un Routeur appelé exempleRouteur qui est affecté à la variable miRouter, comme nous l'avons indiqué une fois cette action effectuée est que nous utilisons le méthode .start() comme on le voit dans la dernière ligne de l'exemple.
Si nous exécutons ce qui suit Routeur Dans notre serveur Web, nous pouvons voir comment ce que nous avons expliqué fonctionne pour nous :
var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Nous avons accédé au test du routeur");}, searchQuestion: function (query, page) {var page_no = page || 1; console.log ("La page no:" + page_no + " à partir de la recherche qui contient le mot :" + requête);}, defaultRoute: function (other) {console.log ('La ressource:' + other + 'N'existe pas');}}); var myRouter = new exampleRouter (); Backbone.history.start (); Voyons dans l'image suivante comment cela se passe lorsque nous accédons au chemin de recherche et lui transmettons les paramètres que nous voulons :
Cette méthode.navigate
Cette méthode est celle qui nous permet mettre à jour l'URL de l'application à partir d'une méthode, cela nous permet d'éviter d'avoir à recharger la page et ainsi de ne pas perdre le but d'une application monopage, le détail c'est que cette méthode ne la fait pas passer par le routeur, donc il faut le faire explicitement, voyons les exemples :
1- Sans passer par le routeur:
viewTask : function (id) {console.log ("Afficher la tâche demandée."); this.navigate ("task /" + id + '/ edit'); // met à jour l'URL mais elle ne passe pas par le routeur}, 2- Avec la correction qui le fait passer par le routeur:
viewTask : function (id) {console.log ("Afficher la tâche demandée."); this.navigate ("task /" + id + '/ edit', {trigger: true}); // met à jour l'URL mais elle ne passe pas par le routeur}, Avec cela, nous atteignons déjà l'objectif depuis l'application changer l'url et immédiatement passer directement par le routeur.
À la fin de ce tutoriel, nous avons vu l'utilité de pouvoir accéder à notre application via des URL conviviales, car cela nous aide à la rendre plus lisible pour les moteurs de recherche et pour les utilisateurs, améliorant ainsi la Référencement.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
