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
Eseguire operazioni con timeout in React
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Cambiare la chiave di partizionamento di Azure Cosmos DB
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Disabilitare automaticamente un workflow di GitHub
Assegnare un valore di default a un parametro di una lambda in C#
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Reactive form tipizzati con modellazione del FormBuilder in Angular
Specificare il versioning nel path degli URL in ASP.NET Web API
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Generare token per autenicarsi sulle API di GitHub
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)