05/17/2017 - CORDOVA APP GENERAZIONE HTML DINAMICO IN JAVASCRIPT

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