CORDOVA APP GENERAZIONE HTML DINAMICO IN JAVASCRIPT
08/05/2017
Un problema frequente nelle app Cordova HTML/Javascript (ma anche in tutte le applicazioni web normali) è quello di generare dinamicamente porzioni di codice HTML, ad esempio creare risultati di ricerca o semplici liste: 
Il metodo più utilizzato è quello di embeddare il codice HTML direttamente come stringhe nel sorgente Javascript, qualcosa di questo tipo:
for(var c = 0; c < cards.length; c++)
{
var card = cards;
var name = card["name"];
var id = card["id"];
var lat = card["lat"];
var lon = card["lon"];
var address = card["address"];
var tags = card["tags"];
var html = '<li class="swipeout"><div class="swipeout-content"><a href="#" onclick="openid(' + id + ');" class="item-link item-content"><div class="item-media"><img src="' + img + '" width="44" style="border-radius: 50%;" /></div><div class="item-inner"><div class="item-title-row"><div class="item-title">' + name + '</div></div><div class="item-subtitle">';
html += address + '<br />';
html += '</div></div></a></div><div class="swipeout-actions-right"><a href="#" class="swipeout-delete" data-confirm="Are you sure want to delete this item?" data-confirm-title="Delete?">Elimina</a></div></li>';
htmlAll += html;
}La variable htmlAll contiene il codice HTML di tutta la lista, da applicare poi al DOM. Il sistema funziona ma l'HTML è a dir poco impossibile da mantenere, cambiarlo anche solo in minima parte richiede una considerevole mole di lavoro.
Template HTML
Un metodo più efficace è quello del templating HTML. E' sufficiente creare il template HTML, ossia l'elemento da generare programmaticamente. Il template contiene tag speciali <%nomevariabile%> che saranno poi sostituiti con gli elementi testuali opportuni. Il codice Javascript si occuperà solamente di prendere il template, riempirlo con i testi corretti, ed appenderlo al DOM. Ecco un esempio di template HTML:
<script type="text/html" id="card_template">
<li>
<a href="#" onclick="loadHistory(<%=id%>);" class="item-link item-content">
<div class="item-media">
<img src="<%=image%>" width="44" style="border-radius: 50%;" />
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title"><%=name%></div>
</div>
<div class="item-subtitle"><%=address%><br /></div>
</div>
</a>
</li>
</script>Da notare che il template va messo nel file .html e non nel codice Javascript. Il browser ignorerà questo codice in quanto racchiuso dal tag
Il codice Javascript risulterà enormemente semplificato:
for(var c = 0; c < cards.length; c++)
{
var card = cards;
htmlAll += tmpl("card_template", card);
}La funzione tmpl() accetta due parametri: l'id del template HTML e l'oggetto Javascript contenete i dati da scrivere nel template stesso. Il valore di ritorno è semplicemente una stringa contenente il codice HTML formattato con i campi presenti nell'oggetto Javascript. Da notare che i tag all'interno del template HTML devono coincidere con i campi dell'oggetto Javascript passato alla funzione tmpl(). Ad esempio, se l'oggetto Javascript è cosi' formato:
var card = {
name: "gianluca",
phone: "***********"
}il template dovrà necessariamente contenere i tag <%=name%> e <%=phone%> La funzione tmpl() può essere scaricata a questo indirizzo
Torna alla home