Foundation 5 Topbar arbeitet nicht durchgängig in Schienen 4

8

Ich verwende Foundation 5 in meiner App rails 4. Das Topbar-Menü funktioniert einwandfrei, wenn ich eine Anfrage sende. Ich kann die Elemente und verschachtelte Elemente ohne Probleme schweben. Dann klicke ich auf eines der Elemente, dem eine link_to-Methode zugeordnet ist. Manchmal gibt es das richtige Ergebnis, wo meine Speisekarte immer noch perfekt funktioniert, aber manchmal friert die ganze Sache ein. Dadurch wird auch die Zurück-Schaltfläche des mobilen Menüs ausgeblendet. Sobald ich eine neue Anfrage über die Aktualisierung oder URL gesendet habe, funktioniert das Menü erneut.

Rails sieht in der Protokolldatei kein Problem. Mein Menü funktioniert gut außerhalb der Schienen. Ich frage mich, ob es vielleicht mit meinem link_to tag_helpers oder der Art, wie ich die Foundation in meiner App eingerichtet habe, zusammenhängt?

Hier ist ein kurzer Überblick darüber, wie der JS für die Foundation geroutet wird. (Die Konfiguration, die sie in ihren Dokumenten vorschlagen) Ansichten / Layouts / application.html.erb:

%Vor%

assets / application.js:

%Vor%

Ist jemand anderes auf dieses Problem gestoßen? Gibt es eine gute Lösung außer der Verwendung von Foundation 5 da draußen?

Danke Alex

    
Alex Aube 22.01.2014, 20:15
quelle

4 Antworten

11

Foundation hat bekannte Probleme mit Turbolinks, Ihr Problem könnte darauf zurückzuführen sein.

Um dies zu beheben, könntest du Turbolinks deaktivieren und sehen, ob die obere Leiste immer noch Probleme hat.

Hier ist eine einfache Anleitung: Ссылка .

Darüber hinaus, wenn Sie Turbolinks haben müssen, und Turbolinks ist das Problem. Sie können versuchen, jquery turbolinks wie hier zu sehen: Ссылка .

Wenn das Problem weiterhin besteht, besteht der nächste Schritt darin, die Reihenfolge zu überprüfen, in der Sie die JavaScript-Dateien importieren (dies ist bei diesen Turbolinks / Foundation-Problemen von Bedeutung), und Sie können auf diese Weise zufrieden sein. Ich habe keine genaue Reihenfolge, in die du sie einfügen kannst, aber wenn du nach "Turbolinks Foundation" Problemen suchst, wirst du irgendwann auf einige Lösungen stoßen. Dies ist nicht unbedingt eine bestimmte Lösung, aber es ' lch führe dich in die richtige Richtung.

Update: Probieren Sie diese Bestellung zum Importieren Ihrer JavaScript-Assets aus. Und um die Quelle zu zitieren:

Es ist wichtig, dass alle Javascripts in das Tag geladen werden. Die Reihenfolge der Aufnahme von jQuery ist wichtig - stellen Sie sicher, dass Sie jquery.turbolinks vor den Turbolinks und nach jquery laden. Fügen Sie all Ihre benutzerdefinierten js zwischen jquery-turbolinks.js und turbolinks.js in Ihrer application.js
ein %Vor%

Hinweis: Sehen Sie Alex Aubes Antwort auf dieser Seite für weitere nützliche Informationen.

    
Ecnalyr 22.01.2014, 20:28
quelle
8

Ok. Um mit Ecnylr zu erklären. (Was er richtig erklärt hat, und ich habe ein bisschen falsch verstanden). Das hat für mich funktioniert:

Ich habe = javascript_include_tag "application" am Ende des body of application.html.erb

beibehalten

application.js ist wie folgt:

%Vor%     
Alex Aube 22.01.2014 21:46
quelle
3

Dies funktioniert für Fortschrittsbalken und Fundament-Tabulatoren, Drop-Down-Links, Akkordeon für Turbolinks

%Vor%     
Murtza 09.12.2014 17:58
quelle
0

Ich habe dieses Problem kürzlich erfahren.

Die Verwendung von jquery.turbolinks hat es nicht behoben. Neuanordnen der Anforderungen in der application.js hat es nicht behoben.

Nichts, was bisher hier erwähnt wurde, hat den Trick gemacht.

Die Lösung, die ich gefunden habe , hat den Foundation Initialisierer von application.js in den Körper verschoben. Ich lege es einfach unter meinen _nav Teil.

%Vor%     
LpLrich 09.05.2014 11:42
quelle