Ruby on Rails
Turbolinks

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


introduzione

Turbolinks è una libreria javascript che rende più veloce la navigazione nella tua applicazione web. Quando segui un link, Turbolinks recupera automaticamente la pagina, esegue lo scambio nel suo <body> e unisce il suo <head>, il tutto senza incorrere nel costo di un caricamento di una pagina intera.

Osservazioni

Come sviluppatore di rotaie, probabilmente interagirai minimamente con i turbolink durante lo sviluppo. È, tuttavia, una libreria importante con cui familiarizzare perché può essere la causa di alcuni bug difficili da trovare.

Key takeaway:

  • Associa ai turbolinks:load evento invece dell'evento document.ready
  • Utilizzare l'attributo data-turbolinks-false per disabilitare la funzionalità di turbolink su base per-link.
  • Utilizza l'attributo data-turbolinks-permanent per mantenere gli elementi tra i carichi di pagina e per evitare i bug relativi alla cache.

Per un trattamento più approfondito dei turbolinks, visitare il repository github ufficiale .

Il credito per gran parte di questa documentazione va a coloro che hanno redatto la documentazione dei turbolinks sul repository github.

Con i turbolinks, l'approccio tradizionale all'utilizzo: 

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

non funzionerà Durante l'uso di turbolinks, l'evento $(document).ready() solo una volta: sul caricamento della pagina iniziale. Da quel momento in poi, ogni volta che un utente fa clic su un link sul tuo sito web, i turbolinks intercetteranno l'evento click link e faranno una richiesta ajax per sostituire il tag <body> e unire i tag <head>. L'intero processo attiva la nozione di "visita" nella terra dei turbolinks. Pertanto, anziché utilizzare la sintassi tradizionale document.ready() , dovrai associare l'evento di visita di turbolink in questo modo: 

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

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

È molto facile disabilitare i turbolinks su collegamenti specifici. Secondo la documentazione ufficiale dei turbolinks :

I turbolink possono essere disabilitati per ogni collegamento annotando un link o uno dei suoi antenati con data-turbolinks = "false".

Esempi: 

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

Comprensione delle visite alle applicazioni

Le visite alle applicazioni vengono avviate facendo clic su un collegamento abilitato per Turbolinks o chiamando a livello di programmazione 

Turbolinks.visit(location)

Per impostazione predefinita, la funzione di visita utilizza l'azione 'avanzata'. Più comprensibilmente, il comportamento predefinito per la funzione di visita è quello di avanzare alla pagina indicata dal parametro "posizione". Ogni volta che una pagina viene visitata, i turbolinks inseriscono una nuova voce nella cronologia del browser utilizzando history.pushState . La cronologia è importante perché i turbolinks cercheranno di utilizzare la cronologia per caricare le pagine dalla cache ogni volta che è possibile. Ciò consente un rendering della pagina estremamente veloce per le pagine visitate di frequente.

Tuttavia, se si desidera visitare una posizione senza inserire alcuna cronologia nello stack, è possibile utilizzare l'azione 'replace' nella funzione di visita in questo modo: 

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

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

Questo sostituirà la cima dello stack cronologico con la nuova pagina in modo che il numero totale di elementi nello stack rimanga invariato.

Esiste anche un'azione di "ripristino" che aiuta nelle visite di ripristino , le visite che si verificano a seguito dell'utente che fa clic sul pulsante Avanti o sul pulsante Indietro sul proprio browser. Turbolinks gestisce internamente questi tipi di eventi e consiglia agli utenti di non manomettere manualmente il comportamento predefinito.

Annullare le visite prima che inizino

Turbolinks fornisce un listener di eventi che può essere utilizzato per interrompere le visite. Ascolta i turbolinks:before-visit evento turbolinks:before-visit per essere avvisato quando una visita sta per iniziare.

Nel gestore eventi, puoi usare: 

// pure javascript
event.data.url

o 

// jQuery
$event.originalEvent.data.url

per recuperare la posizione della visita. La visita può quindi essere cancellata chiamando: 

event.preventDefault()

NOTA:

Secondo i documenti ufficiali di turbolinks :

Le visite di restauro non possono essere annullate e non si attivano i turbolinks: prima visita.

Elementi persistenti tra i carichi di pagina

Si consideri la seguente situazione: Immagina di essere lo sviluppatore di un sito Web di social media che consente agli utenti di essere amici di altri utenti e che utilizza i turbolinks per velocizzare il caricamento della pagina. In alto a destra di ogni pagina del sito, c'è un numero che indica il numero totale di amici che un utente ha attualmente. Immagina di usare il tuo sito e di avere 3 amici. Ogni volta che viene aggiunto un nuovo amico, è disponibile un javascript che aggiorna il contatore degli amici. Immagina di aver appena aggiunto un nuovo amico e che il tuo javascript sia eseguito correttamente e aggiornato il conteggio degli amici nella parte in alto a destra della pagina per eseguire il rendering 4. Ora, immagina di fare clic sul pulsante Indietro del browser. Quando la pagina viene caricata, noti che il contatore degli amici dice 3 anche se hai quattro amici.

Questo è un problema relativamente comune e uno per il quale i turbolinks hanno fornito una soluzione. Il motivo per cui si verifica il problema è perché i turbolinks caricano automaticamente le pagine dalla cache quando un utente fa clic sul pulsante Indietro. La pagina memorizzata nella cache non verrà sempre aggiornata con il database.

Per risolvere questo problema, immagina di eseguire il rendering del numero di amici all'interno di un tag <div> con un ID di "conteggio degli amici": 

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

Aggiungendo l'attributo data-turbolinks-permanent , stai dicendo ai turbolinks di mantenere determinati elementi attraverso i carichi di pagina. I documenti ufficiali dicono :

Designare elementi permanenti dando loro un ID HTML e annotandoli con data-turbolinks-permanenti. Prima di ogni rendering, Turbolinks associa tutti gli elementi permanenti con ID e li trasferisce dalla pagina originale alla nuova pagina, preservando i dati e i listener di eventi.



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow