Derzeit wird ein Portfolio erstellt Dabei habe ich eine Kalenderfunktion mit JavaScript implementiert.
** Beim Übergang von link_to zur Kalenderseite Es gab ein Problem, dass JavaScript nur angewendet wurde, wenn es einmal neu geladen wurde **
Ich schreibe diesen Artikel mit der Absicht, die Ursache dieses Bereichs zu klären und Aufzeichnungen zu führen. Bitte beachten Sie, dass dieser Artikel von einem Programmieranfänger stammt.
Alles in allem ** Turbolinks **. Aufgrund dieses Typen wird der JS, den ich hart geschrieben habe, nicht am Übergangsziel angezeigt.
Wenn man so denkt, scheint es ein hasserfüllter Typ zu sein. Als ich verschiedene Dinge recherchierte, schien er tatsächlich ein guter Kerl zu sein.
Es ist ein guter Kerl, aber manchmal mit zusätzlicher Hilfe, Es scheint, dass wir versehentlich unsere wichtige und wichtige JS verstecken.
Turbolinks, vielleicht kannst du es nicht hassen. Das brachte mich dazu, mehr zu wissen (gewaltsam).
Deshalb werde ich genauer hinsehen.
Turbolinks ist eine Bibliothek, die automatisch Ajax-Seitenübergänge als Reaktion auf Linkklicks durchführt.
① Klicken Sie auf das Tag a, um die Übergangszielseite mit Ajax aufzurufen
(2) Wenn das für die erfasste Seite erforderliche CSS oder JS mit dem der aktuellen Seite übereinstimmt, ersetzen Sie nur den Titel oder den Text (nur einen Teil des Bildschirms).
Das ist der Hauptmechanismus von Turbolinks.
Der größte Vorteil der Einführung von Turbolinks besteht darin, dass die Bildschirmanzeige beschleunigt wird.
Wenn Sie auf einen Link klicken, gelangen Sie normalerweise zur angegebenen Seite. Dies dauert also so lange. Wenn Sie jedoch Turbolinks installiert haben, wird kein ** Seitenübergang durchgeführt und Ajax wird Teil des Bildschirms. Da es sich um einen Mechanismus handelt, mit dem nur ** aktualisiert werden kann, dauert das Laden nicht lange und die Seitenanzeige wird schneller.
Aus Sicht der Website möchte ich die Wartezeit so weit wie möglich reduzieren. Turbolinks fühlen sich wie ein Retter an, um UX zu verbessern.
Was für ein guter Kerl: Lachen: Die Tatsache, dass es von Anfang an eingeführt wurde, liegt daran, dass es so bequem und benutzerfreundlich ist, wie es ist.
Das heißt, egal wie gut ein Kerl ist, es kann manchmal und in einigen Fällen ärgerlich sein.
Der Nachteil der Einführung von Turbolinks besteht darin, dass die ordnungsgemäße Anzeige von JS und CSS ** beeinträchtigt werden kann.
In Bezug auf die Vorteile erklärte ich, dass Turbolinks nur einen Teil des Bildschirms aktualisiert. Es kann gesagt werden, dass dieser Mechanismus das Problem verursacht, dass JavaScript nicht gut widerspiegelt. Oben habe ich erwähnt, dass bei Verwendung von Turbolinks ** keine Seitenübergänge ausgeführt werden und nur ein Teil des Bildschirms von Ajax ** aktualisiert wird.
** Da der Seitenübergang des Browsers nicht durchgeführt wurde, wird das JavaScript-Ereignis nicht ausgelöst ** und daher wird das JavaScript nicht gut wiedergegeben.
Dies ist der gemunkelte zusätzliche Abschnitt von Turbolinks. Das war's.
Turbolinks einführen, bei Bedarf deaktivieren, Ich möchte irgendwie das Verhalten von JavaScript widerspiegeln.
Anscheinend gibt es zwei Lösungen für diese Leute.
Stellen Sie sicher, dass JS ordnungsgemäß funktioniert, indem Sie der JS-Datei das Turbolinks-spezifische Ereignis turbolinks: load hinzufügen.
test.js
document.addEventListner('turbolinks:load', function() {
console.log('Loaded');
});
Durch Hinzufügen von data: {"turbolinks" => false} zum a-Tag (link_to)
JS funktioniert normal, indem Turbolinks deaktiviert und zum Übergangsziel gesprungen werden.
test.html.slim
=link_to "Prüfung", tests_path, data: {"turbolinks" => false}
Ich habe mich zufällig mit Turbolinks befasst, als ich das Portfolio erstellt habe. Je mehr ich aufsah, desto tiefer fühlte ich mich. Dieses Mal werde ich die Grundlagen behalten, aber wenn ich noch eine Chance habe, würde ich gerne nachforschen.
Wenn Sie im Inhalt dieses Artikels Fehler oder Auslassungen finden, würden wir uns freuen, wenn Sie uns dies mitteilen könnten.
Referenz: Funktionsprinzip von Rails Guide Turbolinks [Ruby on Rails-Kurzanleitung S.340-S.344](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD % BF% E3% 81% 88% E3% 82% 8B-Ruby-Rails-5% E9% 80% 9F% E7% BF% 92% E5% AE% 9F% E8% B7% B5% E3% 82% AC % E3% 82% A4% E3% 83% 89-% E5% A4% A7% E5% A0% B4% E5% AF% A7% E5% AD% 90 / dp / 4839962227 / ref = sr_1_1? __Mk_ja_JP =% E3 % 82% AB% E3% 82% BF% E3% 82% AB% E3% 83% 8A & crid = 2RTWZ5N8BXF8J & dchild = 1 & keywords = Rails +% E5% AE% 9F% E8% B7% B5% E3% 82% AC% E3% 82 % A4% E3% 83% 89 & qid = 1600782175 & sprefix = Schienen +% E5% AE% 9F% E8% B7% B5% 2Caps% 2C249 & sr = 8-1)
Recommended Posts