Rails 5: come usare $ (document) .ready () con i turbo-link

Turbolinks impedisce ai normali eventi $(document).ready() di sparare su tutte le visite alle pagine oltre al caricamento iniziale, come discusso qui e qui . Tuttavia, nessuna delle soluzioni delle risposte collegate funziona con Rails 5. Come posso eseguire il codice in ogni pagina visitata come nelle versioni precedenti?

Anziché ascoltare l’evento ready , è necessario collegarsi a un evento triggersto da Turbolinks per ogni visita di una pagina.

Sfortunatamente, Turbolinks 5 (che è la versione che appare in Rails 5) è stato riscritto e non usa gli stessi nomi di eventi delle versioni precedenti di Turbolinks, causando il fallimento delle risposte. Ciò che funziona ora è ascoltare i turbolinks: caricare l’ evento in questo modo:

 $( document ).on('turbolinks:load', function() { console.log("It works on each visit!") }) 

JS nativo:

 document.addEventListener("turbolinks:load", function() { console.log('It works on each visit!'); }); 

Questa è la mia soluzione, sovrascrivi jQuery.fn.ready , quindi $(document).ready funziona senza alcuna modifica:

 jQuery.fn.ready = (fn)-> $(this).on 'turbolinks:load', fn 

Ecco la soluzione che funziona per me, da qui :

  1. installa gem 'jquery-turbolinks'

  2. aggiungi questo file .coffee alla tua app: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

  3. chiamalo turbolinks-compatibility.coffee

  4. a application.js

     //= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require turbolinks-compatibility 

Mentre attendiamo la correzione di questa gem davvero fantastica, sono riuscito ad andare avanti modificando quanto segue;

  addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbo:ready', -> callback($) 

a:

  addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbolinks:load', -> callback($) 

Non sono ancora a conoscenza di ciò che non risolve, ma sembrava funzionare bene durante l’ispezione iniziale.

Usa la gem leggera jquery-turbolinks .

Rende $(document).ready() compatibile con Turbolinks senza modificare il codice esistente.

In alternativa, puoi cambiare $(document).ready() in uno di:

 $(document).on('page:fetch', function() { /* your code here */ }); $(document).on('page:change', function() { /* your code here */ }); 

a seconda di quale è più appropriato nella tua situazione.

Usa: $(document).on 'turbolinks:load', ->

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