Dies ist der erste Beitrag, also sei bitte nett zu mir.
Ruby 2.6.5 Rails 6.0.3.2
Beim Erstellen einer Anwendung mit Rails lief das Verhalten manchmal nicht gut, wenn die Seite geändert wurde.
Ich selbst bin ziemlich verstopft, deshalb werde ich es als Memorandum belassen. Außerdem möchte ich Menschen, die ähnlich verstopft sind, so viel wie möglich geben können.
Geben Sie Informationen an, die Ihnen einen Hinweis für diejenigen geben, die beim ersten Laden der Seite Probleme haben. Erwägen Sie das Laden einer Seite, wenn Sie Turbolinks verwenden.
Das erste Laden einer Seite funktioniert nicht, wenn Rails-Turbolinks verwendet werden.
・ Was sind Turbolinks? Gem wird standardmäßig aus Rails 4.0 eingeführt ・ Was sind Turbolinks? Eine Bibliothek, die Bildschirmübergänge beschleunigt (nicht den gesamten Bildschirm, sondern nur einen Teil des Bildschirms) ・ JavaScript funktioniert aufgrund von Turbolinks möglicherweise nicht richtig.
① Der HTML-Code der Seite wird geladen (2) Laden Sie das CSS und JavaScript, auf die auf der Seite verwiesen wird ③ Rendern Sie die Seite (zeigen Sie die Seite basierend auf den Informationen an)
Wenn in Schritt (2) mehrere CSS- und JS-Dateien vorhanden sind, wird eine Mehrfachkommunikation zwischen dem Browser und dem Webserver durchgeführt, und die Kommunikationsgeschwindigkeit wird verlangsamt.
Hier kam das "Asset Pipeline" -Framework ins Spiel (seit Rails 3.0). Die Asset-Pipeline ist ein Mechanismus, der "JavaScript-, CSS- und Bilddateien, die Sie in einer Ruby on Rails-Anwendung verwenden möchten, zu einer einzigen Datei verkettet und komprimiert und gleichzeitig die Entwicklungsarbeit erleichtert".
Diese Asset-Pipeline hat die Kommunikation zwischen dem Browser und dem Server verringert.
Neu in der Asset-Pipeline von Rails 4.0 sind "Turboliks".
"Turbolinks" extrahiert nur den "Titel" und "Text" der aktuellen Seite und konvertiert sie beim Übergang von Seiten in den neuen HTML-Titel "Titel" und "Text". Dadurch entfällt der Prozess des erneuten Abrufs von CSS und JavaScript durch den Browser und der Prozess wird beschleunigt.
Wenn Sie Turbolinks verwenden, funktioniert das auf Seitenlade basierende JavaScript nicht mehr.
Normalerweise tritt das Ladeereignis auf, wenn die Seite geladen wird. Das Lastereignis tritt jedoch nicht auf, wenn der Bildschirm durch Turbolinks geschaltet wird.
Lassen Sie es daher in der folgenden Beschreibung funktionieren, indem Sie es zuerst laden, neu laden und die Seite wechseln (erste Wahl).
$(document).on('turbolinks:load', ()=> {
Schauen wir uns ein Beispiel an.
$(document).on('turbolinks:load', ()=> {
$('#image-box').on('change', '.js-file', function(e) {
//Bestimmen Sie mit der hasClass-Methode, ob dies eine Conpilation-Klasse hat
const conpilation = $(this).hasClass('conpilation');
if (!conpilation) {
//Geben Sie eine Eingabe mit der ersten Nummer von fileIndex ein(.append fügt am Ende des Elements ein Tag hinzu)
$('#image-box').append(buildFileField(fileIndex[0]));
//Hier`item_images_attributes_${fileIndex[0]}_image`)Und const html id="item_images_attributes_${index}_image">Ist in Ordnung, wenn sie zusammen sind
$('.ListingMain__entire__menu__list__field__display__content').attr('for', `item_images_attributes_${fileIndex[0]}_image`)
// shift()Die Methode entfernt das erste Element aus dem Array und gibt dieses Element zurück. Diese Methode ändert die Länge des Arrays.
fileIndex.shift();
//Addiere 1 zur letzten Zahl(.push ist eine Methode zum Hinzufügen eines neuen Elements am Ende eines Arrays)
fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
} else {
return false;
}
});
});
Das sollte funktionieren! !! !! Ich war überrascht, aber das Verhalten wird erst beim ersten Laden merkwürdig.
Versuchen Sie zu feuern, wenn der Bildschirm geladen wird.
$(document).on('ready page:load', ()=> {
Aber auch das funktioniert nicht. ..
Wenn dies nicht funktioniert, können Sie nichts dagegen tun.
= link_to new_item_path, class: "Sell__listing", data: {"turbolinks" => false} do
Zusammenfassend funktioniert die obige Beschreibung beim ersten Laden der Seite einwandfrei.
data: {"turbolinks" => false}
Diese Beschreibung ist der Punkt. Damit können Turbolinks nur für die Übergangszielseite deaktiviert werden.
Ab Rails 6.0 und späteren Versionen wird standardmäßig ein Juwel namens Webpacker eingeführt. Webpack ist ein Framework zum Verwalten verschiedener JavaScripts, die zum Erstellen von Webanwendungen erforderlich sind. Die moderne Entwicklung von Webanwendungen verwendet verschiedene JavaSctipt-Bibliotheken, die ihre Abhängigkeiten verwalten (Modulbündler).
Webpacker Bisher verwendete Rails eine Asset-Pipeline zum Verwalten von JavaScript usw. Da die JavaScript-Bibliothek jedoch erweitert wurde, wird die Richtlinie zur Verwendung von Webpack ab Rails 6.0 geändert.
Dieses Mal habe ich jQuery verwendet, sodass es kein Problem gab, es in der Asset-Pipeline zu implementieren. In Zukunft können Sie Webpacker verwenden. Es scheint jedoch, dass Webpack in Rails-Anwendungen ohne Verwendung von Webpacker installiert werden kann. In diesem Bereich mangelt es immer noch an Studien, daher denke ich darüber nach, meine Studien fortzusetzen.
Wenn Sie Rails 4.0 oder höher verwenden und die Seite nicht gut geladen wird, können Sie sie möglicherweise gut implementieren, indem Sie die obigen Punkte berücksichtigen.
Referenz: https://qiita.com/hiroyayamamo/items/b258acbaa089d9482c8a https://www.ryotaku.com/entry/2019/01/15/213420
Ich hoffe, Sie finden diesen Artikel hilfreich. Von nun an möchte ich mitteilen, was ich gelernt habe, damit ich so viel wie möglich geben kann. Vielen Dank.
Recommended Posts