Guida · Il contenuto
Le viste: elenchi dal database
Una sezione che non contiene il contenuto: contiene la domanda da fare, e disegna le risposte con la forma che le dai.
Dove siamo
Finora ogni blocco portava il suo contenuto. Alla fine di questo capitolo avrai un elenco che si aggiorna da solo quando cambia il database, senza che nessuno tocchi la pagina.
Il gesto
Aggiungi una sezione alla pagina. Nella sua tab «Data» aggiungi una riga: una chiave, per esempio items, la collection da leggere, un ordinamento e un limite.
Nel contenuto metti i blocchi che disegnano UN elemento, e al blocco che deve ripetersi scrivi in «Repeat for» block.items. Dentro, i percorsi leggono l’elemento: un testo con dataPathValue { "text": "title" } mostra il suo titolo.
Salva, ricarica. Quello che hai messo nel contenuto si ripete per ogni risultato.
// una sezione dentro il layout di una pagina, in Payload
{
"blockType": "sections",
"container": { "viewMode": "ContainerGrid3" },
"data": [
{ "key": "items", "source": "collection", "contentType": "pages", "sort": "-createdAt", "limit": 6, "fields": ["title", "slug"] }
],
"content": [
{ "blockType": "content", "viewMode": "CardPanel", "repeatFor": "block.items", "content": [
{ "blockType": "text", "viewMode": "h4", "dataPathValue": { "text": "title" } }
] }
]
}Cos’è appena successo
La sezione ha fatto la domanda una volta, e il blocco con «Repeat for» è stato copiato una volta per elemento. Quello che hai messo nel contenuto è un modello: ogni copia ha la sua identità, e i suoi percorsi leggono il suo elemento.
È la stessa separazione dei viewMode, applicata a un elenco: la forma la decidi tu una volta, quante volte disegnarla lo decide il dato. Per questo cambiare l’aspetto di una lista di sei elementi costa quanto cambiarlo per uno.
Il dato arriva com’è: una query restituisce sempre una lista, anche con un limite di 1. Un elemento solo si legge come tanti, con «Repeat for».
Una vista che si riusa
La stessa sezione, salvata come documento della collection «Sections», si cita da qualunque pagina con un blocco «Section reference». Porta con sé righe e forma: la scrivi una volta e la usi ovunque.
Una vista viva
Nella tab «Data» dichiara dei params, per esempio { "value": "6" }, e uno stato. Le righe li citano come {{params.value}}, e quando un controllo cambia il parametro la vista si ricarica da sola, senza ricaricare la pagina.
Con lo stato shared l’indirizzo segue la scelta, e un link riproduce la vista; con url la pagina naviga. La pagina «Views, by example» che init semina mostra ogni caso: aprila dall’admin per vedere come è fatta.
Le sorgenti esterne invecchiano a tempo
Oltre alle collection, una riga può leggere un JSON esterno: arriva com’è, lista o oggetto, sotto la chiave che dichiari in dataSet. E lì cambia una cosa: il risultato viene tenuto in cache per un tempo dichiarato, non invalidato da un salvataggio.
Vuol dire che una modifica all’origine si vede quando la cache scade, non subito. È un compromesso voluto, perché un sito pubblico non interroga un servizio terzo a ogni richiesta, ma va saputo prima, non scoperto dopo.
Quando non funziona
Fai puntare una riga a una collection che non c’è, o metti un filtro che non trova nulla. In entrambi i casi ottieni la stessa cosa: niente.
Un elenco vuoto e un elenco che non ha potuto interrogare nessuno si vedono uguali. Se una vista è vuota, prima di cercare nel filtro verifica che la sorgente risponda. Se invece «Repeat for» punta a qualcosa che non è una lista, non nasce nessuna copia e la console del server lo dice.
Avanti
Sai leggere dal database. Nel capitolo dopo ci scrivi: i form.