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.
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 è così 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