Comment puis-je déclencher de manière fiable des événements jQuery avec Rails 4 et Turbo-Links ?

Exploiter les événements jQuery dans Rails 4 avec Turbo-Links

Les développeurs Rails 4 sont souvent confrontés au dilemme de l'organisation des fichiers JavaScript tout en utilisant des Turbo-Links . Généralement, l'événement « ready » de jQuery est utilisé pour déclencher l'exécution de JavaScript lors du chargement de la page. Cependant, lorsque Turbo-Links est activé, cet événement ne se déclenche pas lors des transitions de page suivantes.

Pour résoudre ce problème, il est crucial de comprendre le fonctionnement de Turbo-Links. Contrairement aux rechargements de pages traditionnels, Turbo-Links permet des transitions de page transparentes sans charger complètement la nouvelle page. En conséquence, l'événement "ready" de jQuery, qui est lié au processus de chargement initial du DOM, ne se déclenche plus après le chargement de la première page.

Heureusement, Turbo-Links propose une solution. Il diffuse un événement « page:load » chaque fois qu'une nouvelle page est transitionnée. Cet événement peut être utilisé pour imiter le comportement de l'événement "ready" de jQuery et garantir la bonne exécution du code JavaScript.

Dans CoffeeScript, cela peut être réalisé comme suit :

ready = ->

  # JavaScript code

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

Dans Vanilla JavaScript, le code équivalent serait :

var ready;
ready = function() {

  # JavaScript code

};

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

Avec Rails 5 et Turbolinks 5, l'événement "page:load" a été remplacé par "turbolinks : charger." Dans ce cas, le code JavaScript peut être simplifié comme suit :

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

  # JavaScript code

});

En utilisant ces techniques, les développeurs Rails 4 peuvent garantir que les événements jQuery fonctionnent de manière fiable même avec les Turbo-Links activés, permettant ainsi un utilisateur transparent et réactif. expérience.

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!