Ruby on Rails
Turbolinks

CSS HTML JavaScript jQuery MongoDB MySQL postgresql Ruby Language SQL twitter-bootstrap
Recherche…


Introduction

Turbolinks est une bibliothèque JavaScript qui accélère la navigation dans votre application Web. Lorsque vous suivez un lien, Turbolinks extrait automatiquement la page, échange son <body> et fusionne son <head>, sans avoir à payer le coût d’un chargement complet de la page.

Remarques

En tant que développeur de rails, vous interagirez probablement de manière minimale avec les turbolinks pendant votre développement. Il s'agit cependant d'une bibliothèque importante à connaître car elle peut être à l'origine de bogues difficiles à trouver.

Points à retenir:

  • Lier à l' turbolinks:load au lieu de l'événement document.ready
  • Utilisez l'attribut data-turbolinks-false pour désactiver la fonctionnalité turbolink par liaison.
  • Utilisez l'attribut data-turbolinks-permanent pour conserver les éléments sur les chargements de page et éviter les bogues liés au cache.

Pour un traitement plus approfondi des turbolinks, visitez le dépôt officiel de github .

Le crédit de la majeure partie de cette documentation va aux personnes qui ont rédigé la documentation de turbolinks sur le dépôt github.

Liaison au concept de turbolink d'un chargement de page

Avec les turbolinks, l’approche traditionnelle de l’utilisation de: 

$(document).ready(function() {
  // awesome code
});

ne marchera pas Lors de l'utilisation de turbolinks, l'événement $(document).ready() ne se déclenche qu'une seule fois: lors du chargement initial de la page. À partir de ce moment, chaque fois qu'un utilisateur clique sur un lien de votre site Web, turbolinks intercepte l'événement link click et effectue une requête ajax pour remplacer la balise <body> et fusionner les balises <head>. L'ensemble du processus déclenche la notion de "visite" dans les terrains turbolins. Par conséquent, au lieu d'utiliser la syntaxe traditionnelle document.ready() ci-dessus, vous devrez vous connecter à l'événement de visite de turbolink comme suit: 

// pure js
document.addEventListener("turbolinks:load", function() {
  // awesome code
});

// jQuery
$(document).on('turbolinks:load', function() {
  // your code
});

Il est très facile de désactiver les turbolinks sur des liens spécifiques. Selon la documentation officielle de turbolinks :

Turbolinks peut être désactivé pour chaque lien en annotant un lien ou l'un de ses ancêtres avec data-turbolinks = "false".

Exemples: 

// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>

// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/">I'm also disabled</a>
</div>

// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>

Comprendre les visites d'application

Les visites d'application sont lancées en cliquant sur un lien Turbolinks-enabled ou par programme en appelant 

Turbolinks.visit(location)

Par défaut, la fonction de visite utilise l'action "avance". De manière plus compréhensible, le comportement par défaut de la fonction de visite consiste à avancer vers la page indiquée par le paramètre "location". Chaque fois qu'une page est visitée, turbolinks envoie une nouvelle entrée dans l'historique du navigateur en utilisant history.pushState . L'historique est important car les turbolinks essaieront d'utiliser l'historique pour charger les pages du cache chaque fois que cela est possible. Cela permet un rendu de page extrêmement rapide pour les pages fréquemment visitées.

Toutefois, si vous souhaitez visiter un emplacement sans insérer d’historique dans la pile, vous pouvez utiliser l’action «remplacer» de la fonction de visite comme suit: 

// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>

// programatically
Turbolinks.visit("/edit", { action: "replace" })

Cela remplacera la partie supérieure de la pile d'historique par la nouvelle page afin que le nombre total d'éléments sur la pile reste inchangé.

Il y a également une action de "restauration" qui aide à la restauration , les visites résultant du fait que l'utilisateur clique sur le bouton Suivant ou sur le bouton Précédent de son navigateur. Turbolinks gère ces types d'événements en interne et recommande aux utilisateurs de ne pas modifier manuellement le comportement par défaut.

Annulation des visites avant qu'elles ne commencent

Turbolinks fournit un écouteur d'événement qui peut être utilisé pour empêcher les visites de se produire. Écoutez les turbolinks:before-visit événement turbolinks:before-visit pour être averti lorsqu'une visite est sur le point de commencer.

Dans le gestionnaire d'événements, vous pouvez utiliser: 

// pure javascript
event.data.url

ou 

// jQuery
$event.originalEvent.data.url

récupérer le lieu de la visite. La visite peut alors être annulée en appelant: 

event.preventDefault()

REMARQUE:

Selon les documents officiels de turbolinks :

Les visites de restauration ne peuvent être annulées et ne tirent pas sur les turbolinks: avant la visite.

Des éléments persistants sur les chargements de pages

Considérez la situation suivante: Imaginez que vous développiez un site Web de médias sociaux permettant aux utilisateurs d’être amis avec d’autres utilisateurs et utilisant des turbolinks pour accélérer le chargement des pages. En haut à droite de chaque page du site, il y a un numéro indiquant le nombre total d'amis qu'un utilisateur possède actuellement. Imaginez que vous utilisez votre site et que vous avez 3 amis. Chaque fois qu'un nouvel ami est ajouté, vous avez un javascript qui s'exécute qui met à jour le compteur d'amis. Imaginez que vous veniez d’ajouter un nouvel ami et que votre javascript soit exécuté correctement et que le nombre d’amis dans la partie supérieure droite de la page soit maintenant à jour. Maintenant, imaginez que vous cliquez sur le bouton Précédent du navigateur. Lorsque la page se charge, vous remarquez que le compteur d'amis indique 3, même si vous avez quatre amis.

Il s’agit d’un problème relativement courant pour lequel turbolinks a fourni une solution. Le problème est dû au fait que turbolinks charge automatiquement les pages du cache lorsqu'un utilisateur clique sur le bouton Précédent. La page mise en cache ne sera pas toujours mise à jour avec la base de données.

Pour résoudre ce problème, imaginez que vous rendiez le nombre d'amis dans une balise <div> avec un identifiant "ami-nombre": 

<div id="friend-count" data-turbolinks-permanent>3 friends</div>

En ajoutant l'attribut data-turbolinks-permanent , vous indiquez à turbolinks de conserver certains éléments sur les chargements de page. Les documents officiels disent :

Désignez les éléments permanents en leur attribuant un identifiant HTML et en les annotant avec data-turbolinks-permanent. Avant chaque rendu, Turbolinks associe tous les éléments permanents par ID et les transfère de la page d'origine à la nouvelle page, en conservant leurs écouteurs de données et d'événement.



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow