Tutorial de Backbone.js (III)

En las entradas anteriores hablamos sobre las Vistas en Backbone.js y la interacción con el usuario, y en el primer post de esta serie hablamos sobre la capa de datos de Backbone.js, en esta oportunidad veremos como usar los enrutadores de Backbone.js en una aplicación para hacer el proceso de navegación.

Navegando en el portal
Una de las cosas que hacen de la web de hoy en día algo tan especial es la facilidad de encontrar mucha información agolpada en un solo lugar pero organizada de una manera jerárquica y lógica, justamente este es el caso en que los enrutadores de backbone brillan, pero para entenderlo veamos primero que es un enrutador.
Un enrutador (Router) es una herramienta que permite manejar los hashtags (#) de las URLs de la aplicación como disparadores de eventos. A continuación veamos un ejemplo:

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "posts/:id": "getPost",
            "search/*search": "searchBook"
        }
    });
    var app_router = new AppRouter;
    app_router.on('route:getPost', function (id) {
        alert( "Obtener el número de post " + id );
    });
    app_router.on('route:searchBook', function (search) {
        alert( search );
    });
    Backbone.history.start();
</script>

Como vemos en el ejemplo se define la clase AppRouter, que hereda de la clase Router de Backbone y luego ésta se instancia, despues se utiliza el método on de la variable creada para definir que acciones ejecuta en que momento. El proceso de ruteo dinamico que realiza Backbone.js inicia cuando se invoca la accion start del objeto history de backbone en la linea 15.

Otra de las cosas que hacen interesantes los procesos de ruteo en Backbone.js es que cuando se definen las rutas se pueden extraer datos de las mismas que son pasados al callback como parametros, un ejemplo de esto es la ruta "posts/:id", la cual llama la funcion getPost con un parametro que sera extraido de la URL.

Otra de las herramientas es el uso de splats, que son expresiones que permiten tomar de un segmento de la URL y enviarlo como parametro al callback, un ejemplo de esto es la ruta "search/*search", que puede ser aplicado a la ruta "http://www.miserver.co/search/el-nombre-de-la-rosa", el cual invocara la función searchBook y enviara el parametro "el-nombre-de-la-rosa".

Teniendo en cuenta lo anterior podemos concluir que con la herramienta Router de Backbone.js es posible traer mucha información del servidor y mostrarla solo cuando sea necesario sintener que realizar más peticiones al servidor o haciendolas unicamente cuando se ejecuta un evento especifico, además de poder interactuar con datos extraidos de la URL.

Espero que les haya gustado el post.

Por favor

Comparte este post. 

:D