Cargando



Backbone.js - History

En este tutorial veremos el elemento de Backbone.history, como aplicarlo y como se relaciona con la creación de un router.


may 25 2014 00:34
Profesional
may 28 2014 09:52
Una vez que hemos definido que va a llevar el router en nuestra aplicación Backbone.js, tenemos que hacer que la misma escuche los cambios en la URL, esto es cuando nuestro usuario coloca un valor con su respectivo hash por ejemplo, aplicacion.com/#ruta con ello además de que podremos habilitar la escucha también podrá el usuario guardar en marcadores la aplicación.

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.

¿Cómo utilizarlo?
Para utilizar el Backbone.history debemos hacerlo una vez que definimos el objeto que inicializa nuestro router y para ello lo hacemos a través del método .start().


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:

backbone_history.jpg


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.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X