Ruby on Rails
Turbolinks
Suche…
Einführung
Turbolinks ist eine Javascript-Bibliothek, die das Navigieren in Ihrer Webanwendung beschleunigt. Wenn Sie einem Link folgen, ruft Turbolinks die Seite automatisch ab, wechselt ihren <Hauptteil> und führt dessen <Kopf> zusammen, ohne dass die Kosten für das vollständige Laden der Seite entstehen.
Bemerkungen
Als Schienenentwickler interagieren Sie während der Entwicklung wahrscheinlich minimal mit Turbolinks. Es ist jedoch eine wichtige Bibliothek, mit der Sie vertraut sein sollten, da sie die Ursache für einige schwer zu findende Fehler sein kann.
Die zentralen Thesen:
- Binden Sie an die
turbolinks:loadEreignisturbolinks:loadanstelle des Ereignissesdocument.ready - Verwenden Sie das Attribut
data-turbolinks-false, um die Turbolink-Funktion auf Link-Basis zu deaktivieren. - Verwenden Sie das Attribut "
data-turbolinks-permanent, um Elemente beim Laden von Seiten zu erhalten und Cache-bezogene Fehler zu vermeiden.
Eine ausführlichere Behandlung von Turbolinks finden Sie im offiziellen Repository von github .
Ein Großteil dieser Dokumentation geht an die Leute, die die Turbolinks-Dokumentation für das Github-Repository entworfen haben.
Bindung an das Konzept von turbolink zum Laden einer Seite
Mit Turbolinks ist der traditionelle Ansatz zur Verwendung von:
$(document).ready(function() {
// awesome code
});
funktioniert nicht Bei Verwendung von Turbolinks wird das Ereignis $(document).ready() nur einmal $(document).ready() : beim ersten Laden der Seite. Von diesem Zeitpunkt an werden Turbolinks jedes Mal, wenn ein Benutzer auf einen Link auf Ihrer Website klickt, das Link-Click-Ereignis abfangen und eine Ajax-Anforderung stellen, um das <body> -Tag zu ersetzen und die <head> -Tags zusammenzuführen. Der gesamte Prozess löst die Vorstellung eines "Besuchs" in Turbolinks-Land aus. Anstatt die traditionelle document.ready() Syntax oben zu verwenden, müssen Sie sich daher wie folgt an das Besuchereignis von turbolink binden:
// pure js
document.addEventListener("turbolinks:load", function() {
// awesome code
});
// jQuery
$(document).on('turbolinks:load', function() {
// your code
});
Deaktivieren Sie Turbolinks für bestimmte Links
Es ist sehr einfach, Turbolinks für bestimmte Links zu deaktivieren. Laut der offiziellen Dokumentation zu Turbolinks :
Turbolinks können pro Link deaktiviert werden, indem ein Link oder einer seiner Vorfahren mit data-turbolinks = "false" gekennzeichnet wird.
Beispiele:
// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>
// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
<a href="/">I'm disabled</a>
<a href="/">I'm also disabled</a>
</div>
// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
<a href="/">I'm disabled</a>
<a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>
Anwendungsbesuche verstehen
Anwendungsbesuche werden durch Klicken auf einen Turbolinks-fähigen Link oder programmgesteuert durch Aufrufen initiiert
Turbolinks.visit(location)
Die Besuchsfunktion verwendet standardmäßig die Aktion "Weiter". Verständlicherweise ist das Standardverhalten der Besuchsfunktion, zu der durch den Parameter "location" angegebenen Seite zu gelangen. Immer wenn eine Seite besucht wird, schiebt turbolinks mit history.pushState einen neuen Eintrag in den Browserverlauf. Der Verlauf ist wichtig, da Turbolinks versuchen, den Verlauf zu verwenden, um Seiten aus dem Cache zu laden, wann immer dies möglich ist. Dies ermöglicht extrem schnelles Seiten-Rendering für häufig besuchte Seiten.
Wenn Sie jedoch einen Ort besuchen möchten, ohne einen Verlauf auf den Stapel zu legen, können Sie die Aktion "Ersetzen" für die Besuchsfunktion wie folgt verwenden:
// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>
// programatically
Turbolinks.visit("/edit", { action: "replace" })
Dadurch wird der obere Teil des Protokollstapels durch die neue Seite ersetzt, sodass die Gesamtzahl der Elemente auf dem Stapel unverändert bleibt.
Es gibt auch eine Aktion zum Wiederherstellen , die Wiederherstellungsbesuchern hilft , die Besuche, die durch das Klicken des Vorwärts- oder Zurückschalters des Benutzers im Browser ausgelöst werden . Turbolinks behandelt diese Arten von Ereignissen intern und empfiehlt Benutzern, das Standardverhalten nicht manuell zu manipulieren.
Besuche werden abgebrochen, bevor sie beginnen
Turbolinks stellt einen Ereignis-Listener bereit, mit dem Besuche verhindert werden können. Hören Sie sich die turbolinks:before-visit , der benachrichtigt wird, wenn ein Besuch beginnt.
Im Event-Handler können Sie Folgendes verwenden:
// pure javascript
event.data.url
oder
// jQuery
$event.originalEvent.data.url
um den Ort des Besuchs abzurufen. Der Besuch kann dann storniert werden durch:
event.preventDefault()
HINWEIS:
Laut den offiziellen Turbolinks-Dokumenten :
Wiederherstellungsbesuche können nicht abgesagt werden und keine Turbolinks abfeuern: vor dem Besuch.
Bestehende Elemente beim Laden von Seiten
Stellen Sie sich folgende Situation vor: Stellen Sie sich vor, Sie sind Entwickler einer Social-Media-Website, auf der Benutzer mit anderen Benutzern befreundet sein können und Turbolinks verwenden, um das Laden von Seiten zu beschleunigen. Oben rechts auf jeder Seite der Website gibt es eine Zahl, die die Gesamtzahl der Freunde angibt, die ein Benutzer aktuell hat. Stellen Sie sich vor, Sie nutzen Ihre Site und haben 3 Freunde. Immer wenn ein neuer Freund hinzugefügt wird, haben Sie ein Javascript, das den Freundeszähler aktualisiert. Stellen Sie sich vor, Sie haben gerade einen neuen Freund hinzugefügt und Ihr Javascript wurde ordnungsgemäß ausgeführt und die Anzahl der Freunde oben rechts auf der Seite aktualisiert, um jetzt 4 zu rendern. Stellen Sie sich nun vor, dass Sie auf die Schaltfläche "Zurück" des Browsers klicken. Wenn die Seite geladen wird, stellen Sie fest, dass die Freundesanzeige 3 anzeigt, obwohl Sie vier Freunde haben.
Dies ist ein relativ häufiges Problem, für das Turbolinks eine Lösung gefunden haben. Das Problem tritt auf, weil Turbolinks Seiten automatisch aus dem Cache laden, wenn ein Benutzer auf die Zurück-Schaltfläche klickt. Die zwischengespeicherte Seite wird nicht immer mit der Datenbank aktualisiert.
Um dieses Problem zu lösen, stellen Sie sich vor, dass Sie die Anzahl der Freunde in einem <div> -Tag mit der ID "friend-count" darstellen:
<div id="friend-count" data-turbolinks-permanent>3 friends</div>
Durch das Hinzufügen des Attributs " data-turbolinks-permanent Sie den Turbo-Links mit, dass bestimmte Elemente auch beim Laden von Seiten bestehen bleiben sollen. Die offiziellen Dokumente sagen :
Definieren Sie permanente Elemente, indem Sie ihnen eine HTML-ID zuweisen und sie mit Daten-Turbolinks-Permanent kennzeichnen. Vor jedem Rendern gleicht Turbolinks alle permanenten Elemente anhand der ID ab und überträgt sie von der ursprünglichen Seite auf die neue Seite. Dabei bleiben ihre Daten- und Ereignis-Listener erhalten.
