Ruby on Rails
Turbolinks

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


Invoering

Turbolinks is een JavaScript-bibliotheek waarmee u sneller door uw webtoepassing kunt navigeren. Wanneer u een link volgt, haalt Turbolinks automatisch de pagina op, wisselt deze in <body> en voegt de <head> samen, allemaal zonder de kosten van een volledige pagina-lading.

Opmerkingen

Als railontwikkelaar zult u waarschijnlijk minimaal interageren met turbolinks tijdens uw ontwikkeling. Het is echter een belangrijke bibliotheek om mee bekend te zijn, omdat het de oorzaak kan zijn van enkele moeilijk te vinden bugs.

Belangrijkste leerpunten:

  • Binden aan de turbolinks:load gebeurtenis turbolinks:load plaats van de gebeurtenis document.ready
  • Gebruik het kenmerk data-turbolinks-false om de turbolink-functionaliteit per link uit te schakelen.
  • Gebruik het kenmerk data-turbolinks-permanent om elementen aan te houden tijdens het laden van pagina's en om cache-gerelateerde bugs te voorkomen.

Bezoek de officiële github-repository voor een meer diepgaande behandeling van turbolinks.

Veel van deze documentatie gaat naar de mensen die de turbolinks-documentatie in de github-repository hebben opgesteld.

Binden aan turbolink's concept van een pagina laden

Met turbolinks, de traditionele benadering van het gebruik van: 

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

zal niet werken. Tijdens het gebruik van turbolinks wordt de gebeurtenis $(document).ready() slechts één keer geactiveerd: bij de eerste pagina-laading. Vanaf dat moment, wanneer een gebruiker op een link op uw website klikt, zal turbolinks de link click-gebeurtenis onderscheppen en een Ajax-verzoek indienen om de tag <body> te vervangen en de tags <head> samen te voegen. Het hele proces veroorzaakt het idee van een "bezoek" in turbolinksland. Daarom, in plaats van de traditionele syntaxis van document.ready() hierboven te gebruiken, moet u zich als volgt binden aan het bezoekgebeurtenis van turbolink: 

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

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

Het is heel eenvoudig om turbolinks op specifieke links uit te schakelen. Volgens de officiële documentatie van turbolinks :

Turbolinks kunnen per link worden uitgeschakeld door een link of een van de voorouders te annoteren met data-turbolinks = "false".

Voorbeelden: 

// 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>

Inzicht in toepassingsbezoeken

Applicatiebezoeken worden gestart door op een Turbolinks-compatibele link te klikken, of programmatisch door te bellen 

Turbolinks.visit(location)

Standaard gebruikt de bezoekfunctie de actie 'doorgaan'. Het is begrijpelijker dat het standaardgedrag voor de bezoekfunctie is om door te gaan naar de pagina die wordt aangegeven met de parameter "locatie". Wanneer een pagina wordt bezocht, duwt turbolinks een nieuw item in de geschiedenis van de browser met behulp van history.pushState . De geschiedenis is belangrijk omdat turbolinks de geschiedenis probeert te gebruiken om pagina's indien mogelijk uit de cache te laden. Dit zorgt voor een extreem snelle paginaweergave voor vaak bezochte pagina's.

Als u echter een locatie wilt bezoeken zonder geschiedenis op de stapel te plaatsen, kunt u de actie 'vervangen' in de bezoekfunctie als volgt gebruiken: 

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

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

Hiermee wordt de bovenkant van de geschiedenisstapel vervangen door de nieuwe pagina, zodat het totale aantal items op de stapel ongewijzigd blijft.

Er is ook een "herstel" -actie die helpt bij het herstellen van bezoeken , de bezoeken die plaatsvinden als de gebruiker op de vooruit- of terugknop in zijn browser klikt. Turbolinks verwerkt dit soort evenementen intern en beveelt gebruikers aan niet handmatig te knoeien met het standaardgedrag.

Bezoeken annuleren voordat ze beginnen

Turbolinks biedt een gebeurtenislistener die kan worden gebruikt om bezoeken te stoppen. Luister naar de turbolinks:before-visit gebeurtenis turbolinks:before-visit om op de hoogte te worden gesteld wanneer een bezoek gaat beginnen.

In de gebeurtenishandler kunt u het volgende gebruiken: 

// pure javascript
event.data.url

of 

// jQuery
$event.originalEvent.data.url

om de locatie van het bezoek op te halen. Het bezoek kan vervolgens worden geannuleerd door te bellen naar: 

event.preventDefault()

NOTITIE:

Volgens de officiële documenten van turbolinks :

Restauratiebezoeken kunnen niet worden geannuleerd en ontbranden geen turbolinks: vóór bezoek.

Aanhoudende elementen bij het laden van pagina's

Overweeg de volgende situatie: Stel u voor dat u de ontwikkelaar bent van een sociale media-website waarmee gebruikers vrienden kunnen worden met andere gebruikers en die turbolinks gebruikt om het laden van pagina's sneller te maken. Rechtsboven op elke pagina op de site staat een nummer dat het totale aantal vrienden aangeeft dat een gebruiker momenteel heeft. Stel je voor dat je je site gebruikt en dat je 3 vrienden hebt. Wanneer een nieuwe vriend wordt toegevoegd, is er een javascript actief dat de vriendenteller bijwerkt. Stel je voor dat je zojuist een nieuwe vriend hebt toegevoegd en dat je javascript correct is uitgevoerd en het aantal vrienden rechtsboven op de pagina heeft bijgewerkt om nu 4 weer te geven. Stel je nu voor dat je op de knop Terug van de browser klikt. Wanneer de pagina wordt geladen, merk je dat de vriendenteller 3 zegt, ook al heb je vier vrienden.

Dit is een relatief veel voorkomend probleem en een probleem waarvoor turbolinks een oplossing heeft geboden. De reden voor het probleem is dat turbolinks automatisch pagina's uit de cache laadt wanneer een gebruiker op de knop Terug klikt. De in het cachegeheugen opgeslagen pagina wordt niet altijd bijgewerkt met de database.

Om dit probleem op te lossen, stel je voor dat je het aantal vrienden in een <div> -tag met het ID "aantal vrienden" laat staan: 

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

Door het data-turbolinks-permanent attribuut toe te voegen, vertel je turbolinks bepaalde elementen te behouden bij het laden van pagina's. De officiële documenten zeggen :

Wijs permanente elementen aan door ze een HTML-id te geven en ze te annoteren met data-turbolinks-permanent. Voor elke weergave vergelijkt Turbolinks alle permanente elementen op id en draagt ze over van de oorspronkelijke pagina naar de nieuwe pagina, waarbij hun gegevens en gebeurtenisluisteraars worden bewaard.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow