Saltar al contenido

Cómo usar el router de la columna vertebral y los estados de reacción

Los enrutadores de red troncal se utilizan para enrutar las URL de su aplicación web. Anteriormente, se utilizaban fragmentos de hash (#página) para enrutar las URL, pero con la introducción de la API de Historial, ahora es posible enrutar con las URL estándar (/página).

Los routers de red troncal no encajan exactamente en la definición tradicional de un router MVC, aunque un router de red troncal sigue siendo útil para cualquier aplicación que necesite capacidades de enrutamiento de URL. En un marco tradicional de MVC, el enrutamiento se realiza en el lado del servidor, mientras que en el Backbone el enrutamiento es manejado en el lado del cliente por el navegador.

Cómo usar el router de la columna vertebral y los estados de reacción
Cómo usar el router de la columna vertebral y los estados de reacción

Los enrutadores especificados siempre deben contener al menos una ruta y una función para asignar la ruta particular a su vista correspondiente. En el siguiente ejemplo, puede ver cómo se definen las rutas usando Backbone.Router.

12345678910111213141516importaciónBackbon desde la "columna vertebral";constRouter=Backbone.Router.extend({ routes:{ foo: "foo", bar: "bar"},foo:function(){//acción para asignar la URL del foo a la vista específica},bar:function(){//acción para asignar la URL de la barra a la vista específica}});newRouter();

js

El método extend() crea una clase de ruta personalizada. Define funciones de acción que se activan cuando se emparejan ciertas partes de la URL y proporciona un hash de rutas que empareja las rutas con acciones específicas.

El objeto rutas define un par clave-valor para el enrutador, donde la clave es el fragmento de URL y el valor es su ruta o función de acción.

También puede pasar los parámetros de la ruta a su acción de ruta definiendo una parte del parámetro como :param, que coincide con un solo componente de la URL entre las barras. Se puede hacer opcional envolviéndolo entre paréntesis: (/:param).

12345678constRouter=Backbone.Router.extend({ rutas:{"foo/:id": "foo"},foo:function(id){console.log("Route param : ", id);}};

js

Una vez que el router se ha instanciado y todas las rutas se han configurado correctamente, llama a Backbone.history.start() para empezar a ver el cambio de URL o los eventos de hashchange y a enviar acciones de ruta. Para usar una estructura de URL regular en lugar de URLs hash, puedes pasar la opción pushState al método start() Backbone.history.start({ pushState: true }).