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
Configurare lo startup di applicazioni server e client con .NET Aspire
Utilizzare i variable font nel CSS
Utilizzare Hybrid Cache in .NET 9
Creare un webhook in Azure DevOps
Introduzione ai web component HTML
Path addizionali per gli asset in ASP.NET Core MVC
Fornire parametri ad un Web component HTML
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Creare una libreria CSS universale: Clip-path
Combinare Container Queries e Media Queries
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Referenziare un @layer più alto in CSS