El enrutador en la columna vertebral actúa como una función de enrutamiento, controlando la dirección de la URL, y entra en vigencia al usar la etiqueta # en la URL.
La definición de un enrutador requiere al menos un enrutador y una función para mapear una URL específica, y debemos recordar que en la columna vertebral, cualquier carácter después de la etiqueta # será recibida e interpretada por el enrutador.
Definamos un enrutador:
<script> var aprobador = backbone.router.extend ({rutas: {"*Acciones": "DeFaultrutee" // Match http://example.com/#anything-here}}); // Instanciar el enrutador var app_router = new Approuter; app_router.on ('ruta: defaultrutee', function (acciones) {alerta (acciones);}) // Abra el historial de Backbone Backbone.history.start (); </script>Ahora, hemos definido un enrutador, pero en este momento el enrutador no coincide con la URL específica. A continuación, comenzaremos a explicar en detalle cómo funciona el enrutador.
Enrutamiento dinámico
Backbone le permite definir un enrutador con parámetros específicos. Por ejemplo, es posible que desee recibir una publicación a través de una identificación específica, como una URL: "http://example.com/#/posts/12". Una vez que se activa este enrutador, puede obtener una publicación con una identificación de 12. Luego, definamos este enrutador:
<script> var apreuter = backbone.router.extend ({rutas: {"publicar/: id": "getPost", "*acciones": "defaultrutee" // backbone coincidirá con las rutas de acuerdo con el orden}}); // Instanciar el enrutador var app_router = new Approuter; app_router.on ('ruta: getPost', function (id) {// Tenga en cuenta que los parámetros se pasan aquí alerta ("obtener el número de post" + id);}); app_router.on ('ruta: defaultrutee', function (acciones) {alerta (acciones);}); // Abrir Backbone's History Backbone.history.start (); </script>Reglas coincidentes
Backbone utiliza dos formas de variables para establecer las reglas de coincidencia para el enrutador. El primero es:, que puede coincidir con cualquier parámetro entre cortes en la URL, y el otro es *, que se usa para que coincida con todas las partes detrás de las cortes. Tenga en cuenta que, dado que la segunda forma tiene una ambigüedad mayor que la primera, tiene la prioridad de correspondencia más baja.
El resultado de cualquier forma de coincidencia se pasa a la función relevante como un parámetro. La primera regla puede devolver uno o más parámetros, y la segunda regla devuelve todo el resultado de la coincidencia como un parámetro.
A continuación, usemos ejemplos para ilustrar:
rutas: {"publicaciones/: id": "getPost", // <a href = "http://example.com/#/posts/121"> ejemplo </a> "download/*ruta": "downloadfile", // <<a href = "http://example.com//downoad/user/images/hey.gif"> download </shup "LoadView", // <a href = "http://example.com/#/dashboard/graph"> Load ruta/action View </a>}, app_router.on ('ruta: getPost', function (id) {alert (id); // Después de la alerta, el parámetro aprobado es 12}); app_router.on ('ruta: downloadfile', ruta (ruta), ruta (ruta) (ruta); // Después de la coincidencia, todo el resultado coincidente se devuelve como un parámetro, la ruta es user/imágenes/hey.gif}); app_router.on ('ruta: loadView', función (ruta, acción) {alerta (ruta + "_" + acción); // Después de la coincidencia, se pasan dos parámetros, Dashboard_graph saldrá});A menudo puede escuchar la palabra "enrutador", pero a menudo se refiere a un dispositivo de red que es una navegación y un centro para conexiones de red, transmisión de datos. La función de "enrutador" en la columna vertebral es similar a ella. Como puede ver en el ejemplo anterior, puede navegar por diferentes anclajes de URL al método de acción correspondiente.
(Este mecanismo también se proporciona en muchos marcos web del lado del servidor, pero Backbone.router se centra más en la navegación de aplicaciones de una sola página).
La navegación de enrutamiento de Backbone lo realiza dos clases Backbone.router y Backbone.history:
En general, no instanciamos un historial directamente, porque cuando creamos una instancia de enrutador por primera vez, crearemos automáticamente un objeto Singleton de la historia, al que puede acceder a través de Backbone.history.
Para usar la función de enrutamiento, primero debemos definir una clase de enrutador para declarar las reglas y acciones de URL que deben escucharse. En el ejemplo, justo ahora, definimos la lista de URL que se escuchará a través del atributo de rutas al definir, donde la clave representa las reglas y el valor de la URL representa el método de acción ejecutado cuando la URL está en esta regla.
Reglas hash
Las reglas de la URL representan el fragmento hash (punto de ancla) en la URL actual. Además de poder especificar cadenas generales en las reglas, también debemos prestar atención a dos reglas dinámicas especiales:
Una cadena separada por / (Slash) en la regla se convertirá en una expresión ([^//]+) dentro de la clase de enrutador, representando múltiples caracteres que comienzan con / (Slash). Si: (colon) se establece en esta regla, significa que esta cadena en la URL se pasará a la acción como parámetro.
Por ejemplo, establecemos el tema de la regla/: id. Cuando el punto de anclaje es #Topic/1023, 1023 se pasarán a la acción como ID de parámetro. El nombre del parámetro (: id) en la regla generalmente será el mismo que el nombre de parámetro formal del método de acción. Aunque el enrutador no tiene tales restricciones, es más fácil de entender usando el mismo nombre de parámetro.
* (asterisco) en la regla se convierte en una expresión (.*?) Dentro del enrutador, representando cero o más caracteres arbitrarios. En comparación con la regla: (colon), * (asterisco) tiene limitación de separación no / (barra), al igual que la regla de error * que definimos en el ejemplo anterior.
La regla * (Asterisk) en el enrutador utiliza un patrón no verde después de convertirse en una expresión regular, por lo que puede usar una regla de combinación como esta: * Tipo/: ID, que puede coincidir con #HOT/1023, y pasará caliente y 1023 como parámetros del método de acción.
Lo anterior presenta cómo se definen las reglas. Estas reglas corresponderán a un nombre de método de acción, que debe estar en un objeto de enrutador.
Después de definir la clase de enrutador, necesitamos instanciar un objeto de enrutador y llamar al método Start () del objeto Backbone.history, que comenzará a escuchar la URL. Dentro del objeto History, el evento de cambio de Onhash se utilizará para escuchar los cambios en la URL al hash (punto de anclaje). Para los navegadores que no admiten el evento Onhashchange (como IE6), la historia escuchará el Heartbeat de SetInterval.
Reglas del estado de empuje
Backbone.history también es compatible con URL de estados. PushState es una nueva característica proporcionada por HTML5. Puede operar la URL del navegador actual (en lugar de simplemente cambiar el punto de anclaje), y no causará la actualización de la página, lo que hace que una aplicación de una sola página sea más como un proceso completo.
Para usar la función PushState, primero debe comprender algunos de los métodos y eventos proporcionados por HTML5 para esta característica (estos métodos se definen en la ventana. Objeto History):
1.PushState (): Este método puede agregar una nueva entidad de historial a la historia del navegador a la URL especificada.
2.ReplAcestate (): Este método puede reemplazar la entidad del historial actual con la URL especificada
Llamar a los métodos PushState () y ReplaceState () es solo para reemplazar la URL de la página actual, y realmente no irá a esta dirección de URL (cuando use el botón Back o Adelante, no saltará a la URL). Podemos escuchar los cambios de URL causados por estos dos métodos a través del evento OnPopState.
Métodos relacionados con el enrutamiento
1.Rutee () Método
Después de establecer las reglas de enrutamiento, si se requiere un ajuste dinámico, puede llamar al método Router.route () para agregar dinámicamente reglas de enrutamiento y métodos de acción, por ejemplo:
Router.route ('Topic/: Pageno/: PageSize', 'Page', Function (Pageno, PageSize) {// TODO}); Cuando llamamos al método de ruta (), la regla dada puede ser no solo una cadena, sino también una expresión regular: router.route (/^topic /(.*?)/(.*?)$/, 'Page', function (Pageno, PageSize) {// tODO});2.navigate () método
En el ejemplo anterior, las reglas de URL se desencadenan por nuestra entrada manual. En las solicitudes reales, a veces puede ser necesario saltar y navegar manualmente, y puede llamarlo
El método router.navigate () se usa para el control, por ejemplo: router.navigate ('topic/1000', {disparador: true});Este código cambia la URL a http: //localhost/index.html#topic/1000 y desencadena el método RenderDetail. Cabe señalar que pasamos en la configuración de activación en el segundo parámetro, que se utiliza para indicar si el método de acción correspondiente se activa mientras cambia la URL.
3.stop () método
Recuerde que comenzamos a enrutar escuchando a través del método Backbone.History.Start (). También puede llamar al método Backbone.history.stop () en cualquier momento para dejar de escuchar, por ejemplo:
Router.route ('Topic/: Pageno/: PageSize', 'Page', Function (Pageno, PageSize) {Backbone.history.stop ();});Ejecute este código y acceda a la URL: http: //localhost/index.html#topic/5/20. Encontrará que después de ejecutar esta acción, la escucha ya no entrará en vigencia.