Rails 5 - Turbolinks 5, einige JS nicht geladen auf Seite rendern
Ich habe eine Rails-App, die ich kürzlich auf 5.0.0.RC1 aktualisiert habe. Der Großteil des Übergangs verlief reibungslos, aber ich habe Probleme mit den neuen Turbolinks. In meiner App verwende ich zum Beispiel dieses Juwel:
Meine application.js -Datei sieht so aus:
Wenn ich auf einen Link klicke und eine Ansicht rendere, funktioniert mein chosen-query ( best_in_place nicht so gut) nicht beim ersten Laden, aber wenn ich eine harte Aktualisierung der Seite mache, funktioniert es . Unten ist ein Bild des Ergebnisses, das ich bekomme:
Und hier ist ein Bild davon, wie ich es aussehen soll:
Auch hier funktioniert das erwartete Aussehen, wenn ich die Seite hart auffrische, aber nicht nach einer normalen redirect_to ...
Der Code für mein Dropdown sieht folgendermaßen aus:
%Vor% Nach einem redirect_to ergibt sich folgendes HTML:
... und nach einem erneuten Laden der Seite bekomme ich folgendes:
%Vor% In einer .coffee Datei versuche ich chosen folgendermaßen zu initialisieren:
Irgendwelche Ideen, was ich falsch mache?
6 Antworten
Bei Turbolinks wird das Javascript nur einmal geladen. Auf der Hard-Aktualisierung funktioniert chosen , weil die gesamte Seite neu gerendert wird. Sobald Sie auf einen Link klicken, entschlüsselt Turbolinks die Anfrage und wandelt sie in eine Ajax-Datei um (anstelle einer vollständigen Seitenaktualisierung). Sobald die Anfrage eingeht, ersetzt Turbolinks nur die body der Seite und belässt die JS im selben Zustand wie zuvor.
Um das zu beheben, müssen Sie Ihren gewählten Initialisierer in das turbolinks:load -Ereignis wie folgt einfügen
Weitere Informationen finden Sie unter Ссылка
Hier ist meine Lösung mit Turbolinks 5 und jQuery:
-
install gem 'jquery-turbolinks'
-
Fügen Sie diese .coffee-Datei Ihrer App hinzu: Ссылка
-
nennen Sie es turbolinks-compatibility.coffee
-
unter application.js
// = erfordert jquery
// = erfordert jquery_ujs
// = erfordert jquery.turbolinks// = Turbolinks erfordern // = Turbovolumenkompatibilität erfordern
Ich habe ernsthafte Kopfschmerzen, um einen Weg zu finden, mein gesamtes JavaScript zum Laufen zu bringen. Zuerst versuche ich die Lösung mit dem Juwel jquery.turbolinks, indem Sie diesem Video folgen: Wie man auf turbolinks 5 aufrüstet , aber ich Ich habe Lightbox erhalten, weil die Bilder auf derselben Seite nicht richtig funktionieren. Also bevor ich Turbolinks ein für allemal deaktiviere, nehme ich mir mehr Zeit auf der Seite von github und ich versuche das:
%Vor%Sie müssen das auf jeden Link setzen, wo das JavaScript eine Seite neu laden muss, um zu funktionieren.
Vielleicht ist es nicht die beste Lösung, aber das macht meine Kopfschmerzen weniger schmerzhaft.
Turbolinks und Jquery sind ein bisschen Kopfschmerzen. Anstatt eine Aktion für das Dokument bereit zu machen, auf Seite: load sollte besser funktionieren, denn bei Turbolinks lädt es nicht die gesamte Dokumentation neu, wenn Sie die Website durchsuchen. So etwas kann funktionieren:
%Vor%Ich habe versucht, das selbst zu lösen und eine Lösung gefunden, die für mich funktioniert.
Mein Problem war, dass ich ein Forum mit einer "Zitat" -Funktionalität für Kommentare hatte. Mit Turbolinks 5 habe ich mehrere Event-Listener bekommen und endete mit bis zu vier Zitaten aus demselben Kommentar in meinem Editor.
Ich habe bei Idempotenz gelesen und hier eine Lösung gefunden: Wie man jQuery 'bind' oder 'on' Event Handler idempotent macht
Ich habe eine globale Funktion, die ich in meiner Datei globals.coffee für Ereignisse verwende, erstellt (wirklich kopiert).
%Vor%Und es funktioniert.
Meine Funktionen sehen so aus:
%Vor%Alle Werte dafür gehen an: Pointy , der die Lösung geliefert hat.
Hier ist, was ich tue .. Turbolinks5 um mehrfach geladen zu verhindern.
%Vor%Tags und Links ruby javascript jquery ruby-on-rails turbolinks