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

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

Piuttosto che ascoltare l' readyevento, devi collegarti a un evento lanciato da Turbolinks per ogni visita alla pagina.

Sfortunatamente, Turbolinks 5 (che è la versione che appare in Rails 5) è stato riscritto e non utilizza gli stessi nomi di eventi delle versioni precedenti di Turbolinks, causando il fallimento delle risposte menzionate. Ciò che funziona ora è ascoltare l' evento turbolinks: load 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!');
});

In rails 5 la soluzione più semplice è usare:

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

Invece di $(document).ready. Funziona come un fascino.

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

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

(Per coffeescript)

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

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

Ecco la soluzione che funziona per me, da qui :

1. installare 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. su application.js

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

Mentre attendiamo la correzione di questa gemma davvero interessante, sono stato in grado di andare avanti modificando quanto segue;

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

per:

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

Non sono ancora a conoscenza di cosa questo non risolva, ma sembrava funzionare bene all'ispezione iniziale.

Usa la gemma leggera jquery-turbolinks .

Esso rende $(document).ready() con Turbolink senza modificare il codice esistente.

In alternativa, puoi passare $(document).ready()a 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.

js moderno puro:

const onLoad = () => {
  alert("works")
}

document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)