Ruby on Rails
Turbolinks

CSS HTML JavaScript jQuery MongoDB MySQL postgresql Ruby Language SQL twitter-bootstrap
Sök…


Introduktion

Turbolinks är ett javascript-bibliotek som gör det snabbare att navigera i din webbapplikation. När du följer en länk hämtar Turbolinks automatiskt sidan, byter i <body> och sammanfogar <head>, allt utan att det kostar en hel sida belastning.

Anmärkningar

Som utvecklare av skenor kommer du sannolikt att interagera minimalt med turbolink under din utveckling. Det är emellertid ett viktigt bibliotek att vara bekant med eftersom det kan vara orsaken till vissa svåra att hitta buggar.

Viktiga takeaways:

  • Bind till turbolinks:load händelse i stället för händelsen document.ready
  • Använd data-turbolinks-false att inaktivera turbolink-funktionalitet per länkbasis.
  • Använd data-turbolinks-permanent att kvarstå element över sidbelastningar och för att undvika cache-relaterade buggar.

Besök det officiella githubförvaret för en mer djupgående behandling av turbolinks.

Ersättning för mycket av denna dokumentation går till de människor som utarbetade turbolinks dokumentationen på githubförvaret.

Med turbolinks är den traditionella metoden att använda: 

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

fungerar inte. När du använder turbolinks kommer händelsen $(document).ready() bara att avfyras en gång: på den inledande sidbelastningen. Från och med den punkten, när en användare klickar på en länk på din webbplats, kommer turbolinks att fånga upp länken klickhändelse och göra en ajax-begäran om att ersätta <body> -taggen och slå samman <head> -taggarna. Hela processen utlöser tanken på ett "besök" i turbolinksland. Istället för att använda den traditionella document.ready() -syntaxen ovan måste du därför binda till turbolinks besökshändelse så: 

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

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

Det är mycket lätt att inaktivera turbolink på specifika länkar. Enligt den officiella dokumentationen om turbolinks :

Turbolinks kan inaktiveras per länkbasis genom att kommentera en länk eller någon av dess förfäder med data-turbolinks = "falsk".

Exempel: 

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

Förstå applikationsbesök

Ansökningsbesök initieras genom att klicka på en Turbolinks-aktiverad länk, eller programmatiskt genom att ringa 

Turbolinks.visit(location)

Som standard använder besökfunktionen åtgärden "förskott". Mer förståeligt är standardbeteendet för besöksfunktionen att gå vidare till den sida som anges med "plats" -parametern. När en sida besöks skjuter turbolinks en ny post till webbläsarens historia med hjälp av history.pushState . Historiken är viktig eftersom turbolinks försöker använda historiken för att ladda sidor från cache när det är möjligt. Detta möjliggör extremt snabb sidåtergivning för ofta besökta sidor.

Men om du vill besöka en plats utan att trycka någon historik på bunten kan du använda åtgärden "ersätt" på besöksfunktionen så: 

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

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

Detta kommer att ersätta toppen av historikbunten mot den nya sidan så att det totala antalet objekt på bunten förblir oförändrat.

Det finns också en "återställning" -åtgärd som hjälper till att återställa vists , besök som inträffar som en följd av att användaren klickar på framåt-knappen eller tillbaka-knappen i sin webbläsare. Turbolinks hanterar dessa typer av händelser internt och rekommenderar att användare inte manipulerar med standardbeteendet manuellt.

Avbryter besök innan de börjar

Turbolinks tillhandahåller en händelse lyssnare som kan användas för att stoppa besök från att inträffa. Lyssna på turbolinks:before-visit som ska meddelas när ett besök turbolinks:before-visit att inledas.

I händelseshanteraren kan du använda: 

// pure javascript
event.data.url

eller 

// jQuery
$event.originalEvent.data.url

för att hämta platsen för besöket. Besöket kan sedan avbrytas genom att ringa: 

event.preventDefault()

NOTERA:

Enligt de officiella turbolinksdokumenten :

Restaureringsbesök kan inte avbrytas och avfyr inte turbolink: före besök.

Bestående element över sidbelastningar

Tänk på följande situation: Föreställ dig att du är utvecklaren av en webbplats för sociala medier som gör det möjligt för användare att vara vänner med andra användare och som använder turbolinks för att snabbare ladda sidorna. Längst upp till höger på varje sida på webbplatsen finns det ett nummer som anger det totala antalet vänner som en användare för närvarande har. Föreställ dig att du använder din webbplats och att du har 3 vänner. När en ny vän läggs till har du ett javascript som körs som uppdaterar vänräknaren. Föreställ dig att du just har lagt till en ny vän och att ditt javascript sprang ordentligt och uppdaterat vänvärdet längst upp till höger på sidan för att nu återge 4. Föreställ dig nu att du klickar på webbläsarens bakåtknapp. När sidan laddas märker du att vänräknaren säger 3 även om du har fyra vänner.

Detta är ett relativt vanligt problem och ett turbolänk har gett en lösning på. Anledningen till att problemet uppstår är att turbolinks automatiskt laddar sidor från cachen när en användare klickar på tillbaka-knappen. Den cachelagrade sidan kommer inte alltid att uppdateras med databasen.

För att lösa det här problemet kan du föreställa dig att du gör vänvärdet i en <div> -tagg med ett ID: "vän-räkning": 

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

Genom att lägga till data-turbolinks-permanent berättar du turbolinks att bestå vissa element över sidbelastningar. De officiella dokumenten säger :

Ange permanenta element genom att ge dem ett HTML-id och kommentera dem med data-turbolinks-permanent. Före varje återgivning matchar Turbolinks alla permanenta element med id och överför dem från den ursprungliga sidan till den nya sidan, och bevarar deras data och händelselister.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow