Negli script precedenti abbiamo trattato i Web components: degli elementi HTML personalizzati che permettono di inscatolare una determinata funzionalità per poterla riutilizzare a piacimento in altre pagine della stessa applicazione o in altri progetti. Dopo l'introduzione e la gestione degli eventi, vediamo come sia possibile fornire dei parametri ad un Web component.
I parametri verranno passati al componente tramite degli attributi HTML, i cui valori verranno utilizzati per aggiornare il contenuto mostrato. Per ottenere la piena funzionalità dobbiamo gestire due fasi: la creazione del componente, che avviene nel momento in cui viene inserito nella pagina; e l'aggiornamento del parametro, ossia quando durante il ciclo di vita l'attributo cambia valore.
Per primo step modifichiamo il codice precedente in modo da mostrare un paragrafo vuoto.
class MyButton extends HTMLElement { constructor() { super(); // codice precedente.. const paragrafo = document.createElement('p'); paragrafo.id = "mio-paragrafo"; shadow.appendChild(paragrafo); this.parametro = ''; } } customElements.define('my-button', MyButton);
Per gestire l'inizializzazione del valore facciamo riferimento ad un life-cycle event: un evento che viene emanato automaticamente durante la vita del componente. In questo caso utilizzeremo connectedCallback che verrà chiamato nel momento in cui il componente verrà collegato al DOM
class MyButton extends HTMLElement { connectedCallback() { this.render(); } // creaiamo una funzione generica per gestire entrambe le casistiche render() { const paragraph = this.shadowRoot.querySelector('#mio-paragrafo'); paragraph.textContent = this.parametro; } }
Per gestire l'aggiornamento del valore, dobbiamo invece richiedere al Web component di essere proattivo nel momento in cui quel valore cambierà ed eseguire la funzione render.
class MyButton extends HTMLElement { // Definizione dell'attributo 'parametro' come proprietà osservata static get observedAttributes() { return ['parametro']; } // Metodo chiamato quando un attributo osservato viene modificato attributeChangedCallback(name, oldValue, newValue) { // discriminante sul nome dell'attributo if (name === 'parametro') { this.parametro = newValue; this.render(); } } }
Tramite attributeChangedCallback riusciamo a reagire al cambiamento del parametro, salvarlo all'interno della proprietà del componente ed eseguire l'aggiornamento dell'interfaccia.
Per testare che tutte le modifiche funzionino non resterà altro che inserire il Web component in pagina e valorizzare l'attributo parametro
<my-button parametro="Ciao Mondo!"></my-button>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Implementare l'infinite scroll con QuickGrid in Blazor Server
Ordine e importanza per @layer in CSS
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework
Testare l'invio dei messaggi con Event Hubs Data Explorer
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Creare agenti facilmente con Azure AI Agent Service
Gestione degli eventi nei Web component HTML
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
.NET Conference Italia 2024
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
I più letti di oggi
- 12 aprile 2010: ecco la data ufficiale di lancio di VS 2010 e .NET Framework 4.0
- Windows Azure SDK giunge alla versione 1.5
- Nuova CTP di Linq per VB9
- Repository con code-first di Entity Framework
- Usare Unity come framework di dependency injection in MVC 5
- Staticizzare gli URL ed evitarne il cambio nel PostBack
- Un custom control SingleView per ASP.NET 2.0
- ASP.NET 4.0 in C# e VB - Espresso
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!