Créer actuellement un portfolio En cela, j'ai implémenté une fonction de calendrier en utilisant JavaScript,
** Lors de la transition de link_to à la page de calendrier Un problème est survenu en raison du fait que JavaScript n’était pas appliqué à moins qu’il n’ait été rechargé une fois **, alors
J'écris cet article dans le but de clarifier la cause de ce domaine et de garder une trace. Veuillez noter que cet article a été rédigé par un débutant en programmation.
Dans l'ensemble, ** Turbolinks **. À cause de ce type, le JS que j'ai écrit dur n'est pas affiché à la destination de transition.
En pensant de cette façon, cela semble être un gars haineux, Quand j'ai fait des recherches sur diverses choses, il semble que c'est en fait un bon gars.
C'est un bon gars, mais parfois avec une aide supplémentaire, Il semble que nous cachions par inadvertance notre JS important et important.
Turbolinks, peut-être que vous ne pouvez pas le détester. Cela m'a donné envie d'en savoir plus (de force).
C'est pourquoi je vais regarder de plus près.
Turbolinks est une bibliothèque qui ajax automatiquement les transitions de page en réponse aux clics sur les liens.
① Cliquez sur une balise pour obtenir la page de destination de la transition avec Ajax
(2) Si le CSS ou JS requis par la page acquise est le même que celui de la page en cours, ne remplacez que le titre ou le corps (seulement une partie de l'écran).
C'est le mécanisme principal de Turbolinks.
Le plus grand avantage de l'introduction de Turbolinks est qu'il ** accélère l'affichage à l'écran **.
Normalement, cliquer sur un lien vous amènera à la page spécifiée, ce qui prendra un certain temps, mais si vous avez installé Turbolinks, la page ne sera pas modifiée et Ajax utilisera Ajax sur une partie de l'écran. Comme il s'agit d'un mécanisme à mettre à jour uniquement **, le chargement ne prend donc pas de temps et l'affichage de la page s'accélère.
Du point de vue du site, je souhaite éliminer au maximum le temps d'attente. Turbolinks se sent comme un sauveur pour améliorer l'UX.
Quel bon gars: rire: Le fait qu'il ait été introduit dès le début est qu'il est pratique et utilisable tel quel.
Cela dit, peu importe à quel point un gars est bon, cela peut parfois être ennuyeux et dans certains cas.
L'inconvénient de l'introduction de Turbolinks est qu'il peut interférer avec l'affichage correct de JS et CSS **.
En termes d'avantages, j'ai expliqué que Turbolinks ne met à jour qu'une partie de l'écran, On peut dire que ce mécanisme pose le problème que JavaScript ne reflète pas bien. Dans ce qui précède, j'ai mentionné que si vous utilisez Turbolinks, ** la transition de page ne sera pas effectuée et seule une partie de l'écran sera mise à jour par Ajax **.
** Comme la transition de page du navigateur n'a pas été effectuée, l'événement JavaScript ne se déclenche pas **, et par conséquent, le JavaScript ne reflète pas bien.
Ceci est la section supplémentaire de Turbolinks. Je vois.
Présentation de Turbolinks, désactivation si nécessaire, Je veux refléter en quelque sorte le comportement de JavaScript.
Apparemment, il existe deux solutions pour ces personnes.
Faites fonctionner JS correctement en ajoutant l'événement spécifique à Turbolinks `` turbolinks: load '' au fichier JS.
test.js
document.addEventListner('turbolinks:load', function() {
console.log('Loaded');
});
En ajoutant data: {"turbolinks" => false} à la balise a (link_to)
JS fonctionne normalement en désactivant Turbolinks et en le faisant sauter vers la destination de la transition.
test.html.slim
=link_to "tester", tests_path, data: {"turbolinks" => false}
Je me suis penché sur Turbolinks lorsque j'ai créé le portfolio. Plus je levais les yeux, plus je me sentais profondément. Cette fois, je vais garder les bases, mais si j'ai une autre chance, j'aimerais enquêter.
Si vous trouvez des erreurs ou des omissions dans le contenu de cet article, nous vous serions reconnaissants de bien vouloir nous le faire savoir.
Référence: Rails Guide Turbolinks Operating Principle [Guide de formation rapide Ruby on Rails p.340-p.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 = rails +% E5% AE% 9F% E8% B7% B5% 2Caps% 2C249 & sr = 8-1)