A pesar que Backbone.js reside en el cliente, su capacidad como framework MVC es totalmente normal, ya que no solo nos permite generar modelos, vistas y controladores, también tenemos la posibilidad de trabajar con Routers, dando la posibilidad con ello de crear URLs amigables y dar mejor acceso a los controladores desde la misma aplicación.
Usualmente con Backbone.js tendemos a realizar aplicaciones de una sola página por lo que tal vez podamos cuestionar el uso de un Router, sin embargo, que sea una aplicación de una sola página no impide que utilicemos el URL como asistente en el acceso a los diferentes recursos que tenga nuestra aplicación.
Router en Backbone.js
El Router en Backbone.js nos permite generar URLs donde le damos acceso a los diferentes recursos de la aplicación, la idea es poder tener URL amigables para efectos de los buscadores y el SEO, además de que podemos permitir a un usuario hacer un bookmark o marcar nuestra aplicación como favorito en su navegador, pero al permitir URLs amigables, este puede hacer el bookmark de una sección en particular, ahorrándole mucha navegación en el site.
Las URL que podemos lograr con el Router de Backbone.js lucen de la siguiente forma:
O si queremos acceder a una consulta más avanzada por ejemplo por categorías y con una página en específico de esa búsqueda podríamos lograr algo como esto:
Construir un Router con Backbone.js
Ya que tenemos un conocimiento básico de que es y lo que puede lograr el Router en una aplicación de Backbone.js, ahora veremos cómo podemos generar uno, de forma que podamos incluirlo en nuestras aplicaciones.
La relación se define de la siguiente forma: 'ruta': 'función',. Donde ruta es la petición que se hace en la barra del navegador y función es hacia donde nos va a dirigir el Router.
Vamos a construir ahora un Router básico para ilustrar lo que hemos venido explicando.
Aquí vamos creando en primera instancia nuestro Backbone.Router, dentro vamos a definir todas las rutas con su respectiva función asociada, con ello ya tendremos nuestro mapa, luego definimos cada función que hemos relacionado con las rutas y finalmente inicializamos nuestro Router.
Usualmente con Backbone.js tendemos a realizar aplicaciones de una sola página por lo que tal vez podamos cuestionar el uso de un Router, sin embargo, que sea una aplicación de una sola página no impide que utilicemos el URL como asistente en el acceso a los diferentes recursos que tenga nuestra aplicación.
Router en Backbone.js
El Router en Backbone.js nos permite generar URLs donde le damos acceso a los diferentes recursos de la aplicación, la idea es poder tener URL amigables para efectos de los buscadores y el SEO, además de que podemos permitir a un usuario hacer un bookmark o marcar nuestra aplicación como favorito en su navegador, pero al permitir URLs amigables, este puede hacer el bookmark de una sección en particular, ahorrándole mucha navegación en el site.
Las URL que podemos lograr con el Router de Backbone.js lucen de la siguiente forma:
O si queremos acceder a una consulta más avanzada por ejemplo por categorías y con una página en específico de esa búsqueda podríamos lograr algo como esto:
Construir un Router con Backbone.js
Ya que tenemos un conocimiento básico de que es y lo que puede lograr el Router en una aplicación de Backbone.js, ahora veremos cómo podemos generar uno, de forma que podamos incluirlo en nuestras aplicaciones.
Router
La idea del Router en Backbone.js es que debemos tener una función que se ejecute cuando se llegue a la ruta, con ello la aplicación sabrá qué hacer cuando tenga ese tipo de peticiones por la URL, esta relación es uno de los pilares más importantes cuando creamos un Router.
La relación se define de la siguiente forma: 'ruta': 'función',. Donde ruta es la petición que se hace en la barra del navegador y función es hacia donde nos va a dirigir el Router.
Vamos a construir ahora un Router básico para ilustrar lo que hemos venido explicando.
var ejemploRouter = Backbone.Router.extend({
/*definimos las rutas y las funciones que tienen */
routes: {
"prueba" : "muestraPrueba",
/* podemos acceder utilizando la forma: http://ejemplo.com/#prueba */
"buscar/:consulta/p:pagina" : "buscarConsulta",
/* podmeos hacer una ruta mas compleja permitiendo varios parametros */
/* por ejemplo: http://ejemplo.com/#consulta/trabajo/p1 */
},
muestraPrueba: function(){
console.log("Hemos accedido a la prueba de router");
},
buscarConsulta: function(consulta, pagina){
var nro_pagina = pagina || 1;
console.log("La paigna 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();
Aquí vamos creando en primera instancia nuestro Backbone.Router, dentro vamos a definir todas las rutas con su respectiva función asociada, con ello ya tendremos nuestro mapa, luego definimos cada función que hemos relacionado con las rutas y finalmente inicializamos nuestro Router.
