Ich bin auf ein Problem in meiner Rails 4-App gestoßen, als ich versucht habe, JS-Dateien "auf Rails-Weise" zu organisieren. Sie waren zuvor über verschiedene Ansichten verstreut. Ich habe sie in separaten Dateien organisiert und mit der Assets-Pipeline kompiliert. Ich habe jedoch gerade erfahren, dass das "ready" -Ereignis von jQuery bei nachfolgenden Klicks nicht ausgelöst wird, wenn die Turboverknüpfung aktiviert ist. Wenn Sie eine Seite zum ersten Mal laden, funktioniert sie. Wenn Sie jedoch auf einen Link klicken, wird nichts innerhalb des Links ready( function($) {
ausgeführt (da die Seite nicht erneut geladen wird). Gute Erklärung: hier .
Meine Frage lautet also: Wie kann ich sicherstellen, dass jQuery-Ereignisse ordnungsgemäß funktionieren, während Turbo-Links aktiviert sind? Schließen Sie die Skripte in einen Rails-spezifischen Listener ein? Oder hat Rails vielleicht etwas Magie, die es unnötig macht? Die Dokumente sind etwas vage, wie dies funktionieren soll, insbesondere im Hinblick auf das Laden mehrerer Dateien über die Manifeste wie application.js.
quelle
var ready = function() { ... } $(document).ready(ready) $(document).on('page:load', ready)
Gibt es Bedenken für beide.ready
und für'page:load'
das Auslösen?ready
Ereignis ausgelöst. Wenn es sich um eine Turbolink-Ladung handelt, wird nur daspage:load
Ereignis ausgelöst. Es ist unmöglich für beideready
undpage:load
auf derselben Seite gefeuert zu werden.page:load
und eineready
durch Leerzeichen getrennte Zeichenfolge für das erste Argumet einfügen.$(document).on('page:load ready', ready);
Das zweite Argument ist einfach eine Funktion, die nachready
dem Beispiel dieser Antwort benannt wird.Ich habe gerade von einer anderen Möglichkeit zur Lösung dieses Problems erfahren. Wenn Sie den
jquery-turbolinks
Edelstein laden , werden die Rails Turbolinks-Ereignisse an diedocument.ready
Ereignisse gebunden, sodass Sie Ihre jQuery auf die übliche Weise schreiben können. Sie fügen einfachjquery.turbolinks
direkt danachjquery
in die js-Manifestdatei ein (standardmäßig :)application.js
.quelle
//= require jquery.turbolinks
dem Manifest hinzufügen (z. B. application.js).Kürzlich fand ich die sauberste und leicht verständlichste Art, damit umzugehen:
ODER
BEARBEITEN
Wenn Sie Ereignisse delegiert haben , die an die gebunden sind
document
, stellen Sie sicher, dass Sie sie außerhalb derready
Funktion anhängen. Andernfalls werden sie bei jedempage:load
Ereignis neu generiert (wodurch dieselben Funktionen mehrmals ausgeführt werden). Zum Beispiel, wenn Sie solche Anrufe haben:Nehmen Sie sie wie folgt aus der
ready
Funktion heraus:An das Ereignis gebundene delegierte Ereignisse
document
müssen nicht an dasready
Ereignis gebunden sein .quelle
ready()
Funktion zu erstellen . Bonus-Upvotes für die Erklärung verbindlicher delegierter Ereignisse außerhalb derready
Funktion.$(document).on( "ready", handler ), deprecated as of jQuery 1.8.
jquery / readyready
Teil durch Verwendung des Edelsteins ungültig gemacht?Fand dies in der Rails 4-Dokumentation , ähnlich der DemoZluk-Lösung, aber etwas kürzer:
ODER
Wenn Sie externe Skripte haben, die aufrufen,
$(document).ready()
oder wenn Sie nicht die Mühe haben, Ihr gesamtes vorhandenes JavaScript neu zu schreiben, können Sie dieses Juwel weiterhin$(document).ready()
mit TurboLinks verwenden: https://github.com/kossnocorp/jquery.turbolinksquelle
Gemäß den neuen Schienenführungen ist der richtige Weg, Folgendes zu tun:
oder in Kaffeeskript:
Hören Sie nicht auf das Ereignis
$(document).ready
und es wird nur ein Ereignis ausgelöst. Keine Überraschungen, keine Notwendigkeit, das Juwel jquery.turbolinks zu verwenden .Dies funktioniert mit Schienen 4.2 und höher, nicht nur mit Schienen 5.
quelle
"turbolinks:load"
Ereignis in Rails 4.2 funktioniert? Dasturbolinks:
Ereignispräfix wurde in den neuen Turbolinks eingeführt und wird in Rails 4.2 IIRC, das Turbolinks Classic verwendet, nicht verwendet . Versuchen Sie es,"page:change"
wenn"turbolinks:load"
Ihre Pre-Rails 5-App nicht funktioniert. Siehe guides.rubyonrails.org/v4.2.7/...page:change
oder aktualisieren Sie Turbolinks. Auch gefunden, kann dies für einige relevant sein, wo Turbolinks Ereignisse in die alten Ereignisnamen übersetzt: github.com/turbolinks/turbolinks/blob/v5.0.0/src/turbolinks/…alert "page has loaded!"
eingerückt werden, um tatsächlich von der Rückruffunktion ausgeführt zu werden?HINWEIS: Eine saubere, integrierte Lösung finden Sie in der Antwort von @ SDP
Ich habe es wie folgt behoben:
Stellen Sie sicher, dass Sie application.js einschließen, bevor die anderen app-abhängigen js-Dateien aufgenommen werden, indem Sie die Einschlussreihenfolge wie folgt ändern:
Definieren Sie eine globale Funktion, die die Bindung in verarbeitet
application.js
Jetzt können Sie Dinge binden wie:
quelle
ready
Ereignis an. Dies bedeutet, dass Sie die "Standard" -Methode zum Initialisieren verwenden können :$(document).ready(function() { /* do your init here */});
. Ihr Init-Code sollte aufgerufen werden, wenn die gesamte Seite geladen ist (-> ohne Turbolinks), und Ihr Init-Code sollte erneut ausgeführt werden, wenn Sie eine Seite über Turbolinks laden. Wenn Sie einen Code NUR ausführen möchten, wenn ein Turbolink verwendet wurde:$(document).on('page:load', function() { /* init only for turbolinks */});
Keines der oben genannten Verfahren funktioniert für mich. Ich habe dieses Problem gelöst, indem ich nicht jQuerys $ (document) .ready verwendet habe, sondern stattdessen addEventListener verwendet habe.
quelle
quelle
turbolinks:load
auf der ersten Seite zu laden, Safari nicht und den hacky Weg , es zu beheben (Triggerungturbolinks:load
aufapplication.js
) offensichtlich bricht Chrome (die zweimal mit diesem feuert). Dies ist die richtige Antwort. Gehen Sie auf jeden Fall mit den 2 Veranstaltungenready
undturbolinks:load
.Sie müssen verwenden:
von turbolinks doc .
quelle
Verwenden Sie entweder die
oder verwenden Sie die .on-Funktion von jQuery, um den gleichen Effekt zu erzielen
Weitere Informationen finden Sie hier: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html
quelle
Anstatt eine Variable zu verwenden, um die Funktion "Bereit" zu speichern und an die Ereignisse zu binden, möchten Sie das Ereignis möglicherweise
ready
bei jedem Auslösen auslösenpage:load
.quelle
Folgendes habe ich getan, um sicherzustellen, dass die Dinge nicht zweimal ausgeführt werden:
Ich finde, dass sich das Verwenden des
jquery-turbolinks
Edelsteins oder das Kombinieren$(document).ready
und /$(document).on("page:load")
oder Verwenden$(document).on("page:change")
von sich selbst unerwartet verhält - insbesondere, wenn Sie sich in der Entwicklung befinden.quelle
$(document).off
Bit in dieser anonymen Funktion "Seite: Ändern" oben habe, wird sie offensichtlich benachrichtigt, wenn ich zu dieser Seite komme. Aber zumindest in der Entwicklung, in der WEBrick ausgeführt wird, wird eine Warnung ausgegeben, wenn ich auf einen Link zu einer anderen Seite klicke. Schlimmer noch, es wird zweimal benachrichtigt, wenn ich dann auf einen Link zurück zur Originalseite klicke.Ich habe den folgenden Artikel gefunden, der für mich hervorragend funktioniert hat, und die Verwendung des folgenden Artikels detailliert beschrieben:
quelle
Ich dachte, ich würde dies hier für diejenigen lassen, die auf Turbolinks 5 aktualisieren : Der einfachste Weg, Ihren Code zu reparieren, ist:
zu:
Referenz: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346
quelle
quelle
turbolinks:load
Ereignis wird beim ersten Laden der Seite sowie nach dem Folgen von Links ausgelöst. Wenn Sie ein Ereignis sowohl an das Standardereignisready
als auch an dasturbolinks:load
Ereignis anhängen , wird es beim ersten Besuch einer Seite zweimal ausgelöst.ready
beim nachfolgenden Laden der Seite zweimal ausgelöst . Bitte ändern oder entfernen Sie es.Getestet kamen so viele Lösungen schließlich dazu. So viele dein Code wird definitiv nicht zweimal aufgerufen.
quelle
Normalerweise mache ich für meine Rails 4-Projekte Folgendes:
Im
application.js
Dann in den restlichen .js-Dateien, anstatt zu verwenden,
$(function (){})
rufe ich aufonInit(function(){})
quelle
Installieren Sie zuerst
jquery-turbolinks
gem. Und vergessen Sie dann nicht, Ihre enthaltenen Javascript-Dateien vom Ende Ihres Körpers auf dasapplication.html.erb
zu verschieben<head>
.Wenn Sie, wie hier beschrieben , den Javascript-Link der Anwendung aus Gründen der Geschwindigkeitsoptimierung in die Fußzeile eingefügt haben, müssen Sie ihn in das Tag verschieben, damit er vor dem Inhalt des Tags geladen wird. Diese Lösung hat bei mir funktioniert.
quelle
Ich fand meine Funktionen verdoppelt , wenn eine Funktion für die Verwendung
ready
undturbolinks:load
so habe ich,Auf diese Weise verdoppeln sich Ihre Funktionen nicht, wenn Turbolinks unterstützt werden!
quelle