ruby > 2.6.5
rails > 5.2.4.2
$(document).ready(function(){
$("#menu").on("click", function() {
$(this).next().slideToggle();
});
});
En utilisant jquery, j'ai ajouté un menu hamburger ouvrable ordinaire. Mis à part les bons et les mauvais du code JS lui-même, il ne devrait y avoir aucun problème de fonctionnement.
Cela fonctionne bien au moment du chargement initial. Le comportement est étrange au moment de la transition de page et du retour du navigateur. Il s'enflamme avec un clic, mais il boucle l'ouverture et la fermeture et est instable. Il fonctionne normalement lorsqu'il est rechargé.
Cela fonctionne, alors peut-être que le moment de chargement est incorrect?
→ Vous ne pouvez même pas tout essayer comme ready ʻonload ʻajaxStop.
Après avoir consulté M. Google, j'ai trouvé une telle description
$(document).on('turbolinks:load', function () {
...
});
turbolinks: load Je n'ai jamais vu ça ...
Apparemment, c'est une description spécifique à Rails.
J'ai fait référence à cet article. Aide-mémoire turbolinks
--Bibliothèque Ajax pour accélérer les transitions de page (Gem)
En d'autres termes, cette fonction semble avoir affecté JS cette fois.
Puisqu'il s'agit d'un joyau, il peut être résolu en l'effaçant, mais il ne sera pas résolu. J'ai recherché comment le gérer.
C'est le traitement principal.
Si vous spécifiez {" turbolinks "=> false} dans le lien lui-même
Ce lien aura des turbolinks désactivés.
<%= link_to "HOGE", root_path, data: {"turbolinks" => false} %>
<%# => <a data-turbolinks="false" href="/">HOGE</a> %>
Si vous écrivez ceci, vous pouvez définitivement supprimer les turbolinks. Cela semble bien si vous ne contrôlez qu'un script spécifique, mais il semble difficile de tout décrire ...
Supprimer cette ligne
Gemfile
#gem 'turbolinks', '~> 5'
Terminal
$ bundle update
app/assets/javascripts/application.js
//= require turbolinks #Supprimer cette ligne
`` 'data-turbolinks-track': supprimer'reload'`.
erb:app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Il a maintenant été désactivé. Il peut être certain qu'il sera désactivé à moins qu'il ne s'agisse d'un site qui utilise beaucoup JS.
Comme ready ʻonload` etc.
Avec cette description, les turbolinks peuvent être chargés sans adaptation.
$(document).on('turbolinks:load', function () {
...
});
De plus, vous pouvez modifier le moment de l'application des turbolinks. Si vous souhaitez en savoir plus, cliquez ici. [Prenez d'autres événements du cycle de vie](https://qiita.com/morrr/items/54f4be21032a45fd4fe9#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3 % 83% A9% E3% 82% A4% E3% 83% 95% E3% 82% B5% E3% 82% A4% E3% 82% AF% E3% 83% AB% E3% 82% A4% E3% 83 % 99% E3% 83% B3% E3% 83% 88% E3% 82% 92% E3% 81% A8% E3% 82% 8B "Prendre d'autres événements du cycle de vie")
Je pense que c'est la meilleure solution cette fois, car le réglage fin fonctionne pour chaque script.
Turbolinks est-il une fonctionnalité intéressante ou une fonctionnalité bruyante ... Je ne peux pas dire non plus pour l'instant lol Je suis sûr qu'il devrait être installé par défaut, mais ... Si vous savez comment l'utiliser plus efficacement, laissez un commentaire!
Recommended Posts