L'utilizzo di un template è una pratica comune in tutti i framework SPA: creando una parte di codice, essa può essere replicata e riutilizzata all'interno di una o più sezioni della pagina. La medesima pratica può essere utilizzata anche all'interno di una normale pagina html utilizzando il tag template e poche righe JavaScript.
Iniziamo dal definire un template, una sezione in cui inserire il template e un bottone che utilizzeremo per eseguire il codice JavaScript.
<template id="my-template"> <p>questo è un template</p> </template> <button type="button" onclick="insertTemplate()">Insert</button> <div class="container"> </div>
È importante ricordare che nulla di quello inserito all'interno del tag template verrà mostrato a video, potremmo dunque inserirlo nella sezione di pagina più comoda per noi.
Passiamo ora ai metodi che ci permetteranno di inserirlo in un punto a nostra scelta: partendo dal template stesso, ne creiamo una copia, in modo che la versione originale rimanga inalterata per un possibile utilizzo futuro, e lo inseriamo all'interno del contenitore.
function insertTemplate() { const template = document.getElementById("my-template"); const clone = template.content.cloneNode(true); document.querySelector('.container').appendChild(clone); // se non volessi che ad un secondo click mi inserisca un altro template template.innerHTML = ""; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare il colore CSS per migliorare lo stile della pagina
Potenziare la ricerca su Cosmos DB con Full Text Search
Change tracking e composition in Entity Framework
Aggiornare a .NET 9 su Azure App Service
Le novità di Angular: i miglioramenti alla CLI
Eliminare una project wiki di Azure DevOps
Ordine e importanza per @layer in CSS
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Ottenere un token di accesso per una GitHub App
Gestione dell'annidamento delle regole dei layer in CSS
Definire stili a livello di libreria in Angular
Eseguire operazioni sui blob con Azure Storage Actions