Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Backbonejs: Rutas

Dijimos que Backbone es especialmente útil para aplicaciones SPA (single page applications) así que vamos a ver un componente que nos ayuda con este tipo de aplicaciones.

¿Qué es una SPA?

Son aplicaciones que transcurren en la misma página, sin ir de una página a otra, un ejemplo típico de Gmail, cuando estamos en la bandeja de entrada vemos un listado de mails, hacemos click en uno de ellos y seguimos en la misma página pero si mirando con atención vamos a notar que parte de la URL ha cambiado, es decir, permanecimos dentro de la misma página pero, de algún modo, hemos ido a un lugar dentro de ella.

Cuando estamos en la bandeja de entrada vemos esta URL

https://mail.google.com/mail/u/0/?pli=1#inbox

Cuando vemos un mail vemos la siguiente

https://mail.google.com/mail/u/0/?pli=1#inbox/145511f0ec63a6d4

Lo que ocurre que por más que cambiemos algo de la URL posterior al numeral ( # ) no se ejecutará la navegación pero nosotros podemos saberlo desde Javascript (y decidir hacer algo), llamamos a esto navegación por anclas.

Navegación por anclas

Un ejemplo muy sencillo de navegación podemos verlo con referencias dentro de la misma página, vamos a Wikipedia para comprobarlo. Ingresamos a la URL del artículo sobre Backbonejs escribiendo esto en el navegador

http://en.wikipedia.org/wiki/Backbonejs

Hasta ahora todo normal, pero si agregamos al final de la URL el numeral y una referencia vemos que el navegador cambia de sitio dentro de la página

http://en.wikipedia.org/wiki/Backbonejs#References

Lo que hicimos no fue más que ir hasta un elemento dentro de la página llamado References, esto es automático, lo interesante es que podemos poner cualquier cosa después del numeral y además si presionamos el botón volver del navegador volvemos a la misma URL tal como era antes, con lo cual podemos navegar estando siempre en la misma página.

Nosotros desde Javascript podemos saber de estos cambios en la URL y hacer cosas, en esto se basa el modelo de rutas de Backbone, vamos a ver un ejemplo:

<html>
<head>
	<script type="text/javascript" src="js/vendor/jquery/jquery.js"></script>
	<script type="text/javascript" src="js/vendor/underscore/underscore.js"></script>
	<script type="text/javascript" src="js/vendor/backbone/backbone.js"></script>
	<script type="text/javascript">
		//creamos una clase Router extendiendo la clase base de Backbonejs
		var Router = Backbone.Router.extend({
			//definimos las rutas
			routes:{
				"": "home", // la url por defecto va a llamar a la función home
				"accion1": "funcion1" //la url #accion1 va a llamar a funcion1
			},
			home: function(){
				console.log("estamos en casa");
			},
			funcion1: function(){
				console.log("la acción 1 ha sido llamada");
			}			
		});
		
		//creamos un router
		var router = new Router();	
		//iniciamos el motor de navegación
		Backbone.history.start();	
	</script>
</head>
<body>
<a href="#accion1">Ir a la acción 1</a>
</body>
</html>

Básicamente cargamos este html en el navegador se escribe en la consola “estamos en casa” y cuando presionamos el link (que apunta a #acccion1) “la acción 1 ha sido llamada”, entonces con Backbone es muy simple escuchar estos cambios en la URL y llamar funciones a partir de ello.

Pasar parámetros a las rutas

Hay muchas cosas que se pueden hacer con las rutas, por ejemplo pasar parámetros, del siguiente modo:

<html>
<head>
	<script type="text/javascript" src="js/vendor/jquery/jquery.js"></script>
	<script type="text/javascript" src="js/vendor/underscore/underscore.js"></script>
	<script type="text/javascript" src="js/vendor/backbone/backbone.js"></script>
	<script type="text/javascript">
		//creamos una clase Router extendiendo la clase base de Backbonejs
		var Router = Backbone.Router.extend({
			//definimos las rutas
			routes:{
				"": "home", // la url por defecto va a llamar a la función home
				"accion1": "funcion1", //la url #accion1 va a llamar a funcion1
				"accion1/:parametro1": "funcion2" //la url #accion1 va a llamar a funcion1
			},
			home: function(){
				console.log("estamos en casa");
			},
			funcion1: function(){
				console.log("la acción 1 ha sido llamada");
			},
			funcion2: function(parametro1){
				console.log("se llama a la acción con el valor de parámetro: " + parametro1);
			}
		});
		
		//creamos un router
		var router = new Router();	
		//iniciamos el motor de navegación
		Backbone.history.start();	
	</script>
</head>
<body>
<a href="#accion1">Ir a la acción 1</a> </br>
<a href="#accion1/valor1">Ir a la acción 1 y pasar un parámetro</a>
</body>
</html>

Mágico, para no extenderme más con detalles que se pueden ver en la documentación los dejo por ahora con un link a un gist de este código, nos leemos.

Loading