Comment faire fonctionner `$(document).ready()` de jQuery avec les liens Turbo de Rails 4 ?

Rails 4 : Utilisation de '$(document).ready()' de jQuery avec l'intégration de Turbo-Links

Tout en travaillant sur un Rails 4 application, les développeurs sont souvent confrontés au besoin d'organiser efficacement leurs fichiers JavaScript. Traditionnellement, le code JavaScript était dispersé dans différentes vues. Cependant, une approche plus organisée implique de les compiler dans des fichiers séparés et d'utiliser le pipeline d'actifs.

Cependant, lorsque Turbo-Links est activé, l'événement jQuery « prêt » rencontre une limitation. Lors des clics suivants, l'événement « prêt » cesse de se déclencher, affectant l'exécution du code dans son champ d'application. Ce problème est dû au fait que la page ne se recharge pas avec les Turbo-Links activés.

Pour résoudre ce problème, il est essentiel de s'assurer que les événements jQuery fonctionnent parfaitement pendant que les Turbo-Links restent actifs. Deux approches peuvent être envisagées :

Approche 1 : Encapsulage d'événements avec un écouteur spécifique à Rails

Cette méthode consiste à encapsuler des scripts JavaScript dans un écouteur spécifique à Rails, garantissant ainsi leur exécution au chargement de la page.

Approche 2 : Utilisation des Turbo-Links Événement

Turbo-Links fournit un événement spécifique, "page:load", qui peut être utilisé pour déclencher le code JavaScript nécessaire. En tirant parti de cet événement, les développeurs peuvent contourner le problème provoqué par les clics ultérieurs.

Pour les utilisateurs de CoffeeScript, l'extrait de code suivant offre une solution :

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

La dernière ligne de cet extrait écoute l'événement "page:load", que Turbo-Links déclenche.

Pour les utilisateurs JavaScript, le code équivalent suivant peut être employé :

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Dans Rails 5, avec la mise à jour Turbolinks 5, l'événement "page:load" a été remplacé par "turbolinks:load", qui est déclenché même lors du chargement initial de la page. Cela simplifie le code comme suit :

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

En implémentant ces solutions, les développeurs peuvent garantir efficacement que les événements jQuery continuent de fonctionner correctement malgré la présence de Turbo-Links.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!