Ruby on Rails
Turbolinks

CSS HTML JavaScript jQuery MongoDB MySQL postgresql Ruby Language SQL twitter-bootstrap
Buscar..


Introducción

Turbolinks es una biblioteca de JavaScript que hace que la navegación de su aplicación web sea más rápida. Cuando sigue un enlace, Turbolinks obtiene automáticamente la página, intercambia su <cuerpo> y fusiona su <cabezado>, todo ello sin incurrir en el costo de una carga de página completa.

Observaciones

Como desarrollador de rieles, es probable que interactúes mínimamente con turbolinks durante tu desarrollo. Sin embargo, es una biblioteca importante con la que hay que estar familiarizado porque puede ser la causa de algunos errores difíciles de encontrar.

Puntos clave:

  • Enlazar a los turbolinks:load evento de turbolinks:load lugar del evento document.ready
  • Utilice el atributo data-turbolinks-false para deshabilitar la funcionalidad de turbolink por enlace.
  • Utilice el atributo data-turbolinks-permanent para persistir los elementos en todas las cargas de la página y evitar errores relacionados con la caché.

Para un tratamiento más profundo de los enlaces turbo, visite el repositorio oficial de github .

La mayor parte de esta documentación corresponde a la gente que redactó la documentación de turbolinks en el repositorio de github.

Con turbolinks, el enfoque tradicional para usar: 

$(document).ready(function() {
  // awesome code
});

no funcionará Durante el uso de turbolinks, el evento $(document).ready() solo se activará una vez: en la carga de la página inicial. A partir de ese momento, cada vez que un usuario haga clic en un enlace de su sitio web, turbolinks interceptará el evento de clic de enlace y realizará una solicitud ajax para reemplazar la etiqueta <body> y combinar las etiquetas <head>. Todo el proceso desencadena la noción de una "visita" en tierra turbolinks. Por lo tanto, en lugar de usar la sintaxis de document.ready() anterior, tendrá que vincularse al evento de visita de turbolink, de este modo: 

// pure js
document.addEventListener("turbolinks:load", function() {
  // awesome code
});

// jQuery
$(document).on('turbolinks:load', function() {
  // your code
});

Es muy fácil desactivar turbolinks en enlaces específicos. Según la documentación oficial de turbolinks :

Los Turbolinks se pueden desactivar por enlace, anotando un enlace o cualquiera de sus antepasados ​​con data-turbolinks = "false".

Ejemplos: 

// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>

// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/">I'm also disabled</a>
</div>

// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>

Entender las visitas de aplicaciones

Las visitas de la aplicación se inician haciendo clic en un enlace habilitado para Turbolinks o programáticamente llamando 

Turbolinks.visit(location)

De forma predeterminada, la función de visita utiliza la acción "avance". De manera más comprensible, el comportamiento predeterminado para la función de visita es avanzar a la página indicada por el parámetro "ubicación". Cada vez que se visita una página, turbolinks inserta una nueva entrada en el historial del navegador usando history.pushState . El historial es importante porque turbolinks intentará usar el historial para cargar páginas desde la memoria caché siempre que sea posible. Esto permite una representación de páginas extremadamente rápida para las páginas visitadas con frecuencia.

Sin embargo, si desea visitar una ubicación sin insertar ningún historial en la pila, puede usar la acción 'reemplazar' en la función de visita de la siguiente manera: 

// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>

// programatically
Turbolinks.visit("/edit", { action: "replace" })

Esto reemplazará la parte superior de la pila de historial con la nueva página para que el número total de elementos en la pila permanezca sin cambios.

También hay una acción de "restauración" que ayuda en las visitas de restauración , las visitas que se producen como resultado de que el usuario haga clic en el botón de avance o atrás en su navegador. Turbolinks maneja estos tipos de eventos internamente y recomienda que los usuarios no manipulen manualmente el comportamiento predeterminado.

Cancelando visitas antes de que comiencen

Turbolinks proporciona un detector de eventos que se puede usar para evitar que ocurran visitas. Escuche los turbolinks:before-visit evento turbolinks:before-visit para que se le notifique cuando una visita está por comenzar.

En el controlador de eventos, puede utilizar: 

// pure javascript
event.data.url

o 

// jQuery
$event.originalEvent.data.url

Para recuperar la ubicación de la visita. La visita puede ser cancelada llamando al 

event.preventDefault()

NOTA:

Según los documentos oficiales de turbolinks :

Las visitas de restauración no se pueden cancelar y no se activan los turbolinks: antes de la visita.

Elementos persistentes a través de cargas de página

Considera la siguiente situación: imagina que eres el desarrollador de un sitio web de redes sociales que permite a los usuarios ser amigos de otros usuarios y que utiliza enlaces de enlace para hacer que la página se cargue más rápido. En la parte superior derecha de cada página del sitio, hay un número que indica el número total de amigos que un usuario tiene actualmente. Imagina que estás usando tu sitio y que tienes 3 amigos. Cada vez que se agrega un nuevo amigo, tiene un javascript que se ejecuta y actualiza el contador de amigos. Imagine que acaba de agregar un nuevo amigo y que su javascript se ejecutó correctamente y actualizó el recuento de amigos en la parte superior derecha de la página para procesar ahora 4. Ahora, imagine que hace clic en el botón Atrás del navegador. Cuando se carga la página, observa que el contador de amigos dice 3 aunque tenga cuatro amigos.

Este es un problema relativamente común y para el que Turbolinks ha proporcionado una solución. La razón por la que se produce el problema es porque turbolinks carga automáticamente las páginas de la caché cuando un usuario hace clic en el botón Atrás. La página en caché no siempre se actualizará con la base de datos.

Para resolver este problema, imagine que representa el recuento de amigos dentro de una etiqueta <div> con un ID de "recuento de amigos": 

<div id="friend-count" data-turbolinks-permanent>3 friends</div>

Al agregar el atributo data-turbolinks-permanent , le está diciendo a turbolinks que persista ciertos elementos en las cargas de la página. Los documentos oficiales dicen :

Designe elementos permanentes asignándoles un ID de HTML y anotándolos con data-turbolinks-permanent. Antes de cada procesamiento, Turbolinks hace coincidir todos los elementos permanentes por ID y los transfiere de la página original a la nueva página, conservando sus datos y escuchas de eventos.



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow