So löschen Sie Fenstervariablen bei der Verwendung von Turbolinks

Question

Mit Ruby auf Schienen habe ich Code, der mit dem folgenden Kaffee-Skript ausgelöst wird;

$ = jQuery 
$(document).on "turbolinks:load", -> 
    if window.progress? 
    // execute code on a div with an id of ```target``` 

Auf Seiten, auf denen der Code auslösen sollen, habe ich ein div mit der id target und einem Skript-Tag, das die progress Parameter lädt z.B.

<%= javascript_tag id: "window_vars" do %> 
    window.progress = <%= raw graph.data.to_json %> 
<% end -%> 

Wenn es keine turbolinks ist, dann funktioniert dies gut, der Code auf den Seiten löst, wo es soll und löst nicht auf den anderen Seiten. Wenn ich jedoch turbolinks 5.0.1 und ich besuche eine Seite, wo der Code nicht Trigger bedeutet, dann auf eine Seite, wo der Code auslöst, und dann zurück auf die Seite, wo der Code nicht ausgelöst werden soll, wird der Code ausgelöst auf der letzten Seite mit einer Ausnahme. Es scheint, dass Turbolinks die Variable window.progress zwischen den Seitenladungen nicht löscht.

Wie stelle ich sicher, dass die über ein Skript geladenen Fenstervariablen zwischen den Seiten gelöscht werden?

Answer 1

Ich stieß auf das gleiche Problem heute etwas ähnliches. Ich vermutete, dass globale Variablen zwischen den Turbolinks-Besuchen bestehen bleiben. Dies ist sinnvoll, da die Seite nicht neu geladen wird. Der Inhalt wird nur überschrieben. Meine Lösung bestand darin, die Daten zu zerstören, bevor Turbolinks eine neue Seite rendert.

document.addEventListener('turbolinks:before-render',() => { 
    delete window.progress; 
}) 

Beachten Sie, dass die delete Methode nicht mit JavaScript-Variablen mit var erklärt funktioniert, aber funktioniert für zu window wie in meinem Fall zugeordneten Attribute. Wenn Sie var verwenden, sollten Sie var progress = null;

Sie haben für wo dies im Lebenszyklus einer Anfrage zu tun. Ich habe vor dem Rendern gewählt, um sicherzustellen, dass die Daten nur "zerstört" werden, wenn die Anfrage erfolgreich war.

Answer 2

Eine Problemumgehung besteht darin, sich nicht auf den window.progress zu verlassen, um festzustellen, ob der Graph vorhanden ist, sondern die ID z.

if $('#target').length > 0