Guida · Lo stato
Reagire dentro una lista
Tre slide, tre pezzi ciascuna, e la stessa identica condizione su tutti e nove. Il figlio non nomina il contenitore: lo trova.
Da dove si parte
Sai legare una prop allo stato con un binding. Alla fine di questo capitolo saprai farlo dentro una lista senza scrivere una posizione a mano.
Il gesto
Su un carosello — o su dei tab, o un accordion — accendi store e dagli un nodeId stabile.
Su un elemento dentro una slide aggiungi un binding con scope: owner, path uguale al NOME dello stato (index per un carosello, active per tab e accordion) e value uguale a {{self.itemValue}}.
Incolla lo stesso identico binding sugli altri elementi. Non cambiare niente.
// il uiState di un elemento dentro una slide
{
"uiState": {
"bindings": [
{ "prop": "className", "mode": "when", "scope": "owner",
"when": { "path": "index", "op": "eq", "value": "{{self.itemValue}}" },
"then": "us-fadeBehaviour us-fadeEnd",
"else": "us-fadeTStart" }
]
}
}Cos’è appena successo
Il contenitore dice CHI è il corrente — index è una posizione, active è quale figlio — e il figlio confronta con la propria identità. Sono due metà, e mancava la seconda: in un tab l’identità esiste già ed è il suo value, ma dentro una slide l’identità È la posizione, e nessuno gliela diceva.
itemValue è quella metà. Scende dal contenitore con lo stesso nome da carosello, tab e accordion, quindi la condizione non cambia idioma passando dall’uno all’altro. Non si scrive: arriva.
owner è l’altra metà. Risale l’albero e prende il primo contenitore che espone quel nome — non il primo che ha uno stato qualsiasi. La differenza conta il giorno che un contenitore intermedio dichiara qualcosa di suo: chi espone active non ruba index a nessuno.
Prima: nove condizioni, una per posizione
{ "path": "testSwiper:index", "op": "in", "value": "0" } // e poi "1", e poi "2"
// dentro c'e l'id di un altro nodo, e la propria posizioneDopo: una sola, ripetuta identica
{ "scope": "owner", "path": "index", "op": "eq", "value": "{{self.itemValue}}" }Perché non basta scrivere l’id
Funziona: testSwiper:index in "0" è una condizione corretta. Il problema è che quel 0 è la posizione della slide congelata nel documento, e le posizioni cambiano.
Il giorno che ne sposti una, tutte e nove continuano a rispondere — dicendo la cosa sbagliata. Non c’è un errore, non c’è un avviso: semplicemente la slide sbagliata si anima, o non si anima nessuna. Un indirizzo relativo non può avere quel difetto perché non contiene niente da tenere aggiornato.
Il binding, e non l’animazione
Per questo caso serve un binding e non una ricetta animate. La ricetta ha una sola direzione: accende, e non esiste lo spegnimento. Su un carosello vuol dire che l’animazione parte al primo giro e poi tutto resta a fine corsa.
Il binding non ha memoria: è una funzione dello stato, viene rivalutato a ogni cambio, e uscire dalla slide rimette i pezzi al punto di partenza da soli. Il giro dopo ripartono.
Quando non funziona
Dimentica store sul contenitore. Non espone nessuno stato, owner non trova chi dichiara quel nome e ripiega sulla chiave piatta: la condizione è falsa per sempre, e sembra che il binding non sia reattivo.
Oppure scrivi active dove il contenitore espone index. Stesso esito, stessa assenza di errore — il nome dello stato lo dice l’admin, nella riga in sola lettura che compare quando accendi store.
Avanti
Il binding sa reagire. Manca cosa lo fa muovere: le animazioni.