Ceci est le premier message, alors soyez gentil avec moi.
Ruby 2.6.5 Rails 6.0.3.2
Lors de la création d'une application avec Rails, le comportement ne fonctionnait pas toujours bien lorsque la page était modifiée.
Je suis moi-même assez bouché, alors je vais le laisser comme un mémorandum. Aussi, je voudrais pouvoir donner autant que possible aux personnes qui sont également obstruées.
Fournissez des informations qui vous donneront un indice à ceux qui rencontrent des difficultés pour charger la page pour la première fois. Pensez à charger une page lorsque vous utilisez des turbolinks.
Le premier chargement d'une page ne fonctionne pas lors de l'utilisation de turbolinks Rails.
・ Qu'est-ce que les turbolinks? Gem introduit par défaut à partir de Rails 4.0 ・ Qu'est-ce que les turbolinks? Une bibliothèque qui accélère les transitions d'écran (ne mettant pas à jour tout l'écran, mais ne mettant à jour qu'une partie de l'écran) ・ JavaScript peut ne pas fonctionner correctement en raison de turbolinks.
① Le HTML de la page est chargé (2) Chargez le CSS et le JavaScript référencés dans la page ③ Rendre la page (afficher la page en fonction des informations)
Si plusieurs fichiers CSS et JS existent à l'étape (2), plusieurs communications seront effectuées entre le navigateur et le serveur Web et la vitesse de communication ralentira.
C'est là qu'intervient le framework "asset pipeline" (depuis Rails 3.0). Le pipeline d'actifs est un mécanisme qui «concatène et compresse les fichiers JavaScript, CSS et image que vous souhaitez utiliser dans une application Ruby on Rails en un seul fichier tout en facilitant le travail de développement».
Ce pipeline d'actifs a réduit la communication entre le navigateur et le serveur.
Et les nouveaux ajouts au pipeline d'actifs de Rails 4.0 sont des "turboliks".
"Turbolinks" extrait uniquement le "titre" et le "corps" de la page actuelle et les convertit en nouveaux "titre" et "corps" HTML lors d'une transition de page. Cela élimine le processus de réacquisition de CSS et JavaScript par le navigateur et accélère le processus.
Si vous utilisez des turbolinks, JavaScript basé sur le chargement de page cessera de fonctionner.
Normalement, l'événement de chargement se produit lorsque la page est chargée. Cependant, l'événement de chargement ne se produit pas lorsque l'écran est commuté par des turbolinks.
Par conséquent, dans la description suivante, faites-le fonctionner en premier chargement, rechargement et changement de page (premier choix).
$(document).on('turbolinks:load', ()=> {
Regardons un exemple.
$(document).on('turbolinks:load', ()=> {
$('#image-box').on('change', '.js-file', function(e) {
//Déterminez si cela a une classe de conpilation avec la méthode hasClass
const conpilation = $(this).hasClass('conpilation');
if (!conpilation) {
//Faire une entrée en utilisant le premier nombre de fileIndex(.append ajoute une balise à la fin de l'élément)
$('#image-box').append(buildFileField(fileIndex[0]));
//Ici`item_images_attributes_${fileIndex[0]}_image`)Et const id html="item_images_attributes_${index}_image">Est-ce bien s'ils sont ensemble
$('.ListingMain__entire__menu__list__field__display__content').attr('for', `item_images_attributes_${fileIndex[0]}_image`)
// shift()La méthode supprime le premier élément du tableau et renvoie cet élément. Cette méthode modifie la longueur du tableau.
fileIndex.shift();
//Ajouter 1 au dernier numéro(.push est une méthode pour ajouter un nouvel élément à la fin d'un tableau)
fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
} else {
return false;
}
});
});
Cela devrait fonctionner! !! !! J'ai été surpris, mais le comportement ne devient étrange que lors du premier chargement.
Essayez de tirer lorsque l'écran se charge.
$(document).on('ready page:load', ()=> {
Mais même cela ne fonctionne pas. ..
Si cela ne fonctionne pas, vous ne pouvez rien y faire.
= link_to new_item_path, class: "Sell__listing", data: {"turbolinks" => false} do
En conclusion, la description ci-dessus fonctionne bien la première fois que la page est chargée.
data: {"turbolinks" => false}
Cette description est le point. Avec cela, les turbolinks ne peuvent être désactivés que pour la page de destination de la transition.
À partir de Rails 6.0 et des versions ultérieures, un joyau appelé Webpacker est introduit en standard. Webpack est un framework pour gérer divers JavaScripts nécessaires à la création d'applications Web. Le développement d'applications Web modernes utilise diverses bibliothèques JavaSctipt, qui gèrent leurs dépendances (module bundler).
Webpacker Jusqu'à présent, Rails utilisait un pipeline d'actifs pour gérer JavaScript, etc. Cependant, à mesure que la bibliothèque JavaScript a été améliorée, la politique d'utilisation de Webpack a été modifiée à partir de Rails 6.0.
Cette fois, j'ai utilisé jQuery, il n'y a donc pas eu de problème de mise en œuvre dans le pipeline d'actifs. À l'avenir, vous pourrez utiliser Webpacker. Cependant, il semble que Webpack puisse être installé dans les applications Rails sans utiliser Webpacker. Il y a encore un manque d'études dans ce domaine, je pense donc à poursuivre mes études.
Si vous utilisez Rails 4.0 ou une version ultérieure et que la page ne se charge pas correctement, vous pourrez peut-être bien l'implémenter en tenant compte de ce qui précède.
référence: https://qiita.com/hiroyayamamo/items/b258acbaa089d9482c8a https://www.ryotaku.com/entry/2019/01/15/213420
J'espère que vous trouverez cet article utile. Désormais, je souhaite partager ce que j'ai appris afin de pouvoir donner le plus possible. Merci.
Recommended Posts