InsertView function

Inserisce un'intera view in una determinata posizione del DOM stampando all'interno di essa il valore di variabili contenute nell'oggetto passato come parametro

// API dBJs-ui

Davide Bausach / 05-05-2016

Argomenti [object]:
- [string] or [Node] data: vista da appendere al DOM
- [object] obj: oggetto contenente le variabili da sostituire nella vista
- [string] targetId: id dell'elemento nel quale incollare la vista
- [string] action: replace || append (azione da eseguire incollando la vista)
- [boolean] voidValue: true || false (default false) impostato a true permette di visualizzare i segnaposti dei valori non presenti nell'oggetto passato come parametro, utile in fase di debug

Standard sintax

    InsertView({
      data: document.getElementById('template').innerHTML,
      obj: obj,
      targetId: 'elementId',
      action: 'append',
      voidValue:: true || false,
      before: function(){
        
      },
      after: function(){
        
      }
    });

La proprietà data dell'oggetto passato come paramentro della funzione InsertView può essere di diversi tipi: una stinga contenente codice html, o un nodo html preso direttamente dal DOM. È consigliato passare la proprietà innserHTML di un tag template come nel successivo esempio; mentre se il risultato della view è ottenuto da una chiamata ajax allora è possibile passare direttamente il responseText.

L'oggetto passato come paramentro della funzione ha anche due funzioni di callback: before viene eseguita prima dell'inserimento della view mentre after viene eseguita dopo. La proprietà action (append o replace) invece permette di settare se la vista che sarà inserita nel targetId sarà appesa a quello che già il targetId contiene o se quest'ultimo sarà prima svuotato e poi riempito con la nostra view.

Example 1

Il codice HTML sarà il seguente:

    <div id="elementId" style="border:1px solid #c2c2c2;padding:20px;">
        
    </div>
      
    <button class="btn_try" type="button" onclick="myFunction();">InsertView</button>

    <template id="myTemplate">
      <div style="border:1px solid #c2c2c2;padding:10px;background-color:#f1f1f1;">
        {{nome}} {{cognome}}
      </div>
    </template>

Mentre quello JavaScript all'esecuzione della funzione sarà il seguente:

    var obj = {
      nome: 'Davide',
      cognome: 'Bausach'
    };

    function myFunction(){
      InsertView({
        data: document.getElementById('myTemplate').innerHTML,
        obj: obj,
        targetId: 'elementId',
        action: 'append',
        before: function(){

        },
        after: function(){

        }
      });
    }