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
Caricare un asset come parte di una release con un workflow di GitHub
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Cache policy su route groups di Minimal API in ASP.NET Core 7
3 metodi JavaScript che ogni applicazione web dovrebbe contenere
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript
Utilizzare la libreria EntityFrameworkCore.Exceptions per gestire le eccezioni di Entity Framework Core in modo tipizzato
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Utilizzo di Map e Object in Javascript
Effettuare update massivi con Entity Framework Core 7