Turbolinks evita que los $(document).ready()eventos normales se activen en todas las visitas a la página, además de la carga inicial, como se explica aquí y aquí . Sin embargo, ninguna de las soluciones de las respuestas vinculadas funciona con Rails 5. ¿Cómo puedo ejecutar código en cada visita a la página como en versiones anteriores?
En lugar de escuchar el readyevento, debe conectarse a un evento activado por Turbolinks para cada visita a la página.
Desafortunadamente, Turbolinks 5 (que es la versión que aparece en Rails 5) se ha reescrito y no usa los mismos nombres de eventos que en versiones anteriores de Turbolinks, lo que provoca que las respuestas mencionadas fallen. Lo que funciona ahora es escuchar los turbolinks: load event así:
$( document ).on('turbolinks:load', function() {
console.log("It works on each visit!")
})
on('ready turbolinks:load')contrario, tengo algunos problemas en algunas páginasJS nativo:
document.addEventListener("turbolinks:load", function() { console.log('It works on each visit!'); });fuente
En rails 5 la solución más sencilla es utilizar:
$(document).on('ready turbolinks:load', function() {});En lugar de
$(document).ready. Funciona de maravilla.fuente
readya la lista, de lo contrario, la función se ejecutará dos veces. Como dijo github.com/turbolinks/turbolinks/#observing-navigation-events , debe hacerlo así:javascript $(document).ready(function() { $(document).on('turbolinks:load', function() {} ) })$(document).readyse activa, al menos en mis propios escenarios, no lo necesitaríaturbolinks:loadreadyse activa el evento. Si hay enlaces turbo, el código se llama dos vecesEsta es mi solución, anular
jQuery.fn.ready, luego$(document).readyfunciona sin ningún cambio:jQuery.fn.ready = (fn)-> $(this).on 'turbolinks:load', fnfuente
documentdevoluciones de llamada. ¿Por qué el voto negativo? Esto debería ser seguro siempre que se utilicen turbolinks en toda la aplicación, ¿verdad?(Para coffeescript)
Yo suelo:
$(document).on 'turbolinks:load', ->En vez de:
$(document).on('turbolinks:load', function() {...})fuente
Aquí hay una solución que funciona para mí, desde aquí :
Instalar en pc
gem 'jquery-turbolinks'agregue este archivo .coffee a su aplicación: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
asígnele el nombre turbolinks-compatibility.coffee
en application.js
//= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require turbolinks-compatibilityfuente
productionenv? ¿Lo has probado? Algunas personas dicen que funciona bien en eldevelopmentmodo.Mientras esperamos la solución de esta joya realmente genial, pude seguir adelante modificando lo siguiente;
addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbo:ready', -> callback($)a:
addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbolinks:load', -> callback($)Todavía no sé lo que esto no resuelve, pero pareció funcionar bien en la inspección inicial.
fuente
Utilice los jquery-turbolinks de gemas ligeras .
Hace que
$(document).ready()funcione con Turbolinks sin cambiar el código existente.Alternativamente, puede cambiar
$(document).ready()a uno de:$(document).on('page:fetch', function() { /* your code here */ }); $(document).on('page:change', function() { /* your code here */ });dependiendo de cuál sea más apropiado en su situación.
fuente