Schienen 5: Verwendung von $ (document) .ready () mit Turbo-Links

Turbolinks verhindern, dass normale $(document).ready()Ereignisse bei allen Seitenbesuchen außer dem anfänglichen Laden ausgelöst werden, wie hier und hier erläutert . Keine der Lösungen in den verknüpften Antworten funktioniert jedoch mit Rails 5. Wie kann ich bei jedem Seitenbesuch Code ausführen, wie in früheren Versionen?

Anstatt das readyEreignis anzuhören , müssen Sie sich bei jedem Seitenbesuch an ein von Turbolinks ausgelöstes Ereignis anschließen.

Leider wurde Turbolinks 5 (die Version, die in Rails 5 angezeigt wird) neu geschrieben und verwendet nicht dieselben Ereignisnamen wie in früheren Versionen von Turbolinks, sodass die genannten Antworten fehlschlagen. Was jetzt funktioniert, ist das Abhören der Turbolinks: Ladeereignis wie folgt :

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

Native JS:

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

In Schienen 5 ist die einfachste Lösung:

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

Anstelle von $(document).ready. Klappt wunderbar.

Dies ist meine Lösung, überschreiben jQuery.fn.readyund $(document).readyfunktioniert dann ohne Änderung:

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

(Für Coffeescript)

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

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

Hier ist eine Lösung, die für mich funktioniert, von hier aus :

1. Installieren gem 'jquery-turbolinks'

2. Fügen Sie diese .coffee-Datei zu Ihrer App hinzu: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. Nennen Sie es turbolinks-compatibility.coffee

4. bei application.js

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

Während wir auf die Lösung dieses wirklich coolen Edelsteins warten, konnte ich vorwärts gehen, indem ich Folgendes modifizierte:

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

zu:

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

Ich bin mir noch nicht bewusst, was dies nicht löst, aber es schien bei der Erstinspektion gut zu funktionieren.

Verwenden Sie die leichten Edelstein- JQuery-Turbolinks .

Es macht $(document).ready() mit Turbolinks arbeiten, ohne den vorhandenen Code zu ändern.

Alternativ können Sie $(document).ready()zu einem der folgenden Elemente wechseln :

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

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

je nachdem, welches in Ihrer Situation besser geeignet ist.