- Learn
- Guida ai Web Components
- Mappare gli attributi sulle proprietà
Mappare gli attributi sulle proprietà
Vediamo ora il processo inverso, cioè come riflettere le modifiche agli attributi nel markup della pagina HTML sulle proprietà del Web component. Il meccanismo che andremo ad implementare si basa sulla possibilità di dichiarare gli attributi da monitorare tramite il getter statico observedAttributes()
. In pratica si tratta di aggiungere al nostro componente questo getter che restituisce un array di stringhe rappresentanti i nomi degli attributi a cui siamo interessati. Il seguente codice mostra la nostra implementazione:
static get observedAttributes() {
return ["max-value", "value"];
}
La presenza di questa proprietà in sola lettura fa si che il browser notifichi al nostro componente quando uno di questi attributi viene modificato. La notifica può essere intercettata implementando il metodo attributeChangedCallback()
, come mostrato dal seguente esempio:
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "max-value":
this._maxValue = newValue;
break;
case "value":
this._value = newValue;
break;
}
this.replaceStarList();
}
}
Il metodo riceve come argomenti il nome dell’attributo che è stato modificato, il vecchio valore dell’attributo ed il nuovo valore. In base al nome dell’attributo viene aggiornata la corrispondente proprietà di appoggio e viene invocato il metodo replaceStarList()
che aggiorna le stelle visualizzate. Dal momento che invochiamo l’aggiornamento visuale quando il valore di un attributo cambia, possiamo togliere la chiamata a replaceStarList()
dal codice che avevamo scritto per l’aggiornamento delle proprietà:
set maxValue(val) {
this._maxValue = val;
this.setAttribute("max-value", val);
}
...
set value(val) {
this._value = val;
this.setAttribute("value", val);
}
Infatti, aggiornando l’attributo tramite setAttribute()
otterremo il nuovo rendering implicitamente quando verrà eseguito il metodo attributeChangedCallback()
.
Questo codice ci consente di specificare il numero di stelle da visualizzare anche tramite markup, come nel seguente esempio:
<my-rating id="myRatingComponent" max-value="10" value="6"></my-rating>
Naturalmente possiamo ottenere la variazione delle stelle da visualizzare modificando il valore delle proprietà anche dopo l’inizializzazione, come mostra il seguente codice che possiamo provare ad inserire all’interno della pagina HTML che contiene il nostro componente:
<script>
setTimeout(function() {
let myRatingComponent = document.getElementById("myRatingComponent");
myRatingComponent.value = 4;
}, 5000)
</script>
Dopo circa cinque secondi dalla visualizzazione del nostro componente con i valori iniziali, vedremo visualizzare quattro stelle internamente colorate.
Se vuoi aggiornamenti su JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Introduzione a Redux, come usarlo con Angular 2
Nel video, dopo una introduzione al FLUX pattern, parleremo di Redux, una libreria per application state management. Il talk includerà […]