javascript - specific - Rails 4 turbo-link evita que las secuencias de comandos jQuery funcionen

rails y jquery

Question

Estoy construyendo una aplicación de Rails 4 y tengo algunos archivos js dispersos que trato de incluir "a la manera de los rieles". Moví los complementos de jquery a / vendor / assets / javascripts y actualicé el manifiesto (application.js) para requerirlos. Cuando cargué las páginas localmente, veo que aparecen correctamente.

Sin embargo, estoy obteniendo un comportamiento incoherente de uno de los scripts compilados. Tengo un archivo js específico del controlador llamado projects.js al que se hace referencia en la aplicación.js mediante el uso de require_tree . :

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .

Veo que el archivo está incluido correctamente, y funciona ... la mitad del tiempo. La otra mitad del tiempo, las cosas en projects.js no parecen hacer nada (son principalmente animaciones jquery y algunas solicitudes ajax). Cuando no funcione, haré clic en los botones un par de veces, no pasará nada, y luego lanzaré este error:

Uncaught TypeError: Cannot read property ''position'' of null
turbolinks.js?body=1:75

Esto nunca sucedió cuando los guiones estaban en las vistas individuales (de la manera incorrecta), así que estoy bastante seguro de que el problema no está en mi código de JavaScript. Otro detalle potencialmente relevante es que las cosas en projects.js están envueltas en un $(document).ready(function(){ . Además, estoy probando en modo de desarrollo para que los javascripts y css no se combinen con la cartera de activos .

¿Alguna idea de lo que está pasando aquí? Soy nuevo en Rails, pero hice todo lo posible para seguir todas las convenciones.

¡Actualizar!

Es predecible cuando mis scripts de proyecto no funcionan. La carga de la primera página funciona todo el tiempo. Luego hago clic en un enlace a una nueva página que usa mis comportamientos de project.js y la segunda página nunca funciona. Hago clic varias veces y eventualmente arrojo el error anterior. Todavía no estoy seguro de por qué, pero sospecho que esto está relacionado con el turbo enlace.

Answer 1

Me doy cuenta de que esta respuesta es REAAAAAAALLLLLLLYYYYY Tarde ... pero pensé que lo agregaría.

Acabo de tener este problema la semana pasada ... Al intentar hacer que Foundation funcione ...

Primero agregué:

gem ''jquery-turbolinks''

Luego lo coloca en application.js como tal:

//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

y luego agregué esto justo debajo de él:

$(document).on(''turbolinks:load'', function() {
});

y todo funcionó para mí. ¡Espero que esto ayude!

Answer 2

Una solución a esto ya está disponible en esta railscast

Aquí hay un ejemplo (el que me gusta usar).

ready = ->
# ..... your js
$(document).ready(ready)
$(document).on(''page:load'', ready)

jquery.turbolinks que resuelve este problema de una manera que te permite seguir haciéndolo de la manera antigua. Funciona muy bien :)

Answer 3

$(document).ready(function(){ no funciona realmente con Turbolinks. Turbolinks :

... hace más rápidos los siguientes enlaces en su aplicación web. En lugar de dejar que el navegador recompile JavaScript y CSS entre cada cambio de página, mantiene viva la instancia de la página actual y reemplaza solo el cuerpo y el título en el encabezado.

Entonces la página solo se carga una vez y luego las piezas se reemplazan según sea necesario. Como la página solo se carga una vez, sus devoluciones de llamada de $(document).ready() solo se activan cuando se visita el sitio por primera vez, no se obtendrán más eventos listos para documentos cuando se cambian las páginas porque Turbolinks no cambia de página. Del fino manual :

Con Turbolinks, las páginas cambiarán sin una recarga completa, por lo que no puede confiar en DOMContentLoaded o jQuery.ready() para activar su código. En cambio, Turbolinks activa eventos en el documento para proporcionar ganchos en el ciclo de vida de la página.

Probablemente quiera escuchar uno de los eventos de Turbolinks:

• page:change la página ha sido analizada y cambiada a la nueva versión y en DOMContentLoaded
• [...]
• page:load se dispara al final del proceso de carga.

page:change es generalmente lo que está buscando, ya que se activa cuando se carga una página nueva y se restaura una página de la memoria caché de la página de Turbolinks.

Es posible que desee desactivar Turbolinks hasta que haya tenido tiempo de revisar todo su JavaScript y haya realizado un barrido de QA completo. También debe probar la velocidad de su sitio para ver si vale la pena usarlo.

Otra opción sería usar jquery.turbolinks para arreglar cosas para usted. No he usado esto, pero otras personas lo están usando con buenos resultados.