Rails 5: wie man $ (document) .ready() mit Turbo-Links verwendet

Question

Turbolinks verhindert normale $(document).ready() Ereignisse abfeuern bei allen Seitenbesuchen neben der anfänglichen Belastung, wie diskutiert here und here. Keine der Lösungen in den verknüpften Antworten funktioniert jedoch mit Rails 5. Wie kann ich Code bei jedem Seitenaufruf wie in früheren Versionen ausführen?

Answer 1

Anstatt auf das Ereignis ready zu hören, müssen Sie sich bei jedem Besuch einer Seite an einem Ereignis beteiligen, das von Turbolinks ausgelöst wird.

Leider wurde Turbolinks 5 (die Version, die in Rails 5 angezeigt wird) neu geschrieben und verwendet nicht die gleichen Ereignisnamen wie in früheren Versionen von Turbolinks, wodurch die angegebenen Antworten fehlschlagen. Was ist funktioniert nun das turbolinks:load Ereignis zu hören, wie so:

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

Answer 2

Mit dem leichtgewichtigen gem jquery-turbolinks.

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

Alternativ können Sie $(document).ready() einem der ändern:

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

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

je nachdem, welche besser geeignet in Ihrer Situation ist.

Answer 3

Während wir auf die Reparatur dieses wirklich coolen Edelsteins warten, war ich in der Lage, weiter voranzukommen, indem ich Folgendes änderte:

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

zu:

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

bin ich noch nicht bewusst, was diese nicht lösen, aber es schien gut auf Erstprüfung zu arbeiten.

Answer 4

Hier Lösung, die für mich arbeiten, von here:

1. installieren gem 'jquery-turbolinks'

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

3. Name es turbolinks-Kompatibilität. Kaffee

4. bei Anwendung.js

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

Answer 5

Einheimische JS:

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

Answer 6

Diese meine Lösung ist, außer Kraft setzen jQuery.fn.ready, dann $(document).ready Arbeiten ohne Änderung:

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

Answer 7

Verwendung:

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