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
Reactive form tipizzati con FormBuilder in Angular
Sfruttare al massimo i topic space di Event Grid MQTT
Ordinare randomicamente una lista in C#
Eseguire i worklow di GitHub su runner potenziati
Gestire i null nelle reactive form tipizzate di Angular
Configurare policy CORS in Azure Container Apps
Supportare lo HierarchyID di Sql Server in Entity Framework 8
Filtering sulle colonne in una QuickGrid di Blazor
Generare velocemente pagine CRUD in Blazor con QuickGrid
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare un service principal per accedere a Azure Container Registry
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL