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?
Respuestas:
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áginas
JS nativo:
document.addEventListener("turbolinks:load", function() {
console.log('It works on each visit!');
});
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.
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:load
readyse activa el evento. Si hay enlaces turbo, el código se llama dos veces
Esta es mi solución, anular jQuery.fn.ready, luego $(document).readyfunciona sin ningún cambio:
jQuery.fn.ready = (fn)->
$(this).on 'turbolinks:load', fn
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() {...})
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-compatibility
productionenv? ¿Lo has probado? Algunas personas dicen que funciona bien en el developmentmodo.
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.
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.