Backbone.history
Como explicamos este es el elemento que hace que nuestra aplicación empiece a escuchar los cambios en la URL tomando los hashes, lo importante de esto es que además nos ayuda a poder hacer una aplicación que pueda tener secciones que sean almacenadas como marcador o bookmark por parte del usuario, creando así secciones que se acceden directamente sin tener que pasar por muchos problemas.
Veamos en el siguiente código cómo sería esta acción:
var miRouter = new ejemploRouter(); Backbone.history.start();
En este caso tenemos un Router llamado ejemploRouter el cual es asignado a la variable miRouter, como indicamos una vez que se hace esta acción es que utilizamos el método .start() como vemos en la última línea del ejemplo.
Si ejecutamos el siguiente Router en nuestro servidor web podremos ver cómo nos funciona lo que hemos explicado:
var ejemploRouter = Backbone.Router.extend({ routes: { "prueba" : "muestraPrueba", "buscar/:consulta/p:pagina" : "buscarConsulta", "*other" : "defaultRoute", }, muestraPrueba: function(){ console.log("Hemos accedido a la prueba de router"); }, buscarConsulta: function(consulta, pagina){ var nro_pagina = pagina || 1; console.log("La pagina nro: " + nro_pagina + " de la busqueda que contiene la palabra: " + consulta); }, defaultRoute: function(other){ console.log('El recurso:' + other +' No existe'); } }); var miRouter = new ejemploRouter(); Backbone.history.start();
Veamos en la siguiente imagen como nos resulta cuando accedemos a la ruta de buscar y le pasamos los parámetros que deseemos:
Como podemos visualizar se ha ejecutado exitosamente la función asociada a la ruta.
Método this.navigate
Este método es el que nos permite actualizar desde un método la URL de la aplicación, esto nos sirve para no tener que recargar la página y así no perder la finalidad de una aplicación de página única, el detalle es que este método no hace que se pase por el router, entonces debemos hacerlo de forma explícita, veamos los ejemplos:
1- Sin pasar por el router:
verTarea: function(id){ console.log("Ver la tarea solicitada."); this.navigate("tarea/" + id + '/editar'); // actualiza la URL pero no pasa por el router },
2- Con la corrección que hace que pase por el router:
verTarea: function(id){ console.log("Ver la tarea solicitada."); this.navigate("tarea/" + id + '/editar', {trigger: true}); // actualiza la URL pero no pasa por el router },
Ya con esto logramos el objetivo de desde dentro de la aplicación cambiar la URL y de una vez pasar por el router directamente.
Finalizando este tutorial vimos la utilidad de poder acceder a nuestra aplicación a través de URLs amigables, ya que esto nos ayuda a que sea más legible para los buscadores y para los usuarios, mejorando de esta forma el SEO.