KnockoutJS - Templating

Templateè un insieme di elementi DOM che possono essere usati ripetutamente. La creazione di modelli semplifica la creazione di applicazioni complesse grazie alla sua proprietà di ridurre al minimo la duplicazione degli elementi DOM.

Esistono 2 modi per creare modelli.

Native templating- Questo metodo supporta le associazioni del flusso di controllo come foreach, with e if. Queste associazioni catturano il markup HTML esistente nell'elemento e lo usano come modello per elementi casuali. Non è richiesta alcuna libreria esterna per questo modello.
String-based templating- KO si connette al motore di terze parti per passare i valori ViewModel in esso e inserisce il markup risultante nel documento. Ad esempio, JQuery.tmpl e Underscore Engine.

Syntax

template: <parameter-value>

<script type = "text/html" id = "template-name">
   ...
   ...   // DOM elemets to be processed
   ...
</script>

Nota che type è fornito come text/html nel blocco di script per notificare a KO che, non è un blocco eseguibile ma solo un blocco modello che deve essere renderizzato.

Parameters

La combinazione delle seguenti proprietà può essere inviata come valore parametro al modello.

name - Questo rappresenta il nome del modello.
nodes- Questo rappresenta un array di nodi DOM da utilizzare come modello. Questo parametro viene ignorato se viene passato il parametro name.
data - Questo non è altro che dati da mostrare tramite il modello.
if - Il modello verrà pubblicato se la condizione data restituisce un valore true o true.
foreach - Per servire il modello in formato foreach.
as - Questo è solo per creare un alias in foreach element.
afterAdd, afterRender, beforeRemove - Sono tutti per rappresentare funzioni richiamabili da eseguire a seconda dell'operazione eseguita.

Osservazioni

Rendering di un modello con nome

I modelli vengono definiti implicitamente dal markup HTML all'interno di DOM quando vengono utilizzati con i collegamenti del flusso di controllo. Tuttavia, se lo desideri, puoi scomporre i modelli in un elemento separato e quindi fare riferimento ad essi per nome.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Named Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
      <div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friend1 = { 
               name: 'Smith', 
               contactNumber: 4556750345, 
               email: '[email protected]' 
            };
            
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: '[email protected]' 
            };
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato template-named.htm file.
Apri questo file HTML in un browser.
Qui, il modello amico viene utilizzato 2 volte.

Utilizzo di "foreach" in Template

Di seguito è riportato un esempio di utilizzo di foreach parametro insieme al nome del modello.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - foreach used with Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', foreach: friends }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = [
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
               { name: 'Lisa', contactNumber: 4567893131, email: '[email protected]' }
            ]
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato template-foreach.htm file.
Apri questo file HTML in un browser.
Qui, il controllo foreach viene utilizzato nell'associazione di modelli.

Creazione di alias utilizzando come parola chiave per elementi foreach

Di seguito è illustrato come creare un alias per un elemento foreach:

<div data-bind = "template: { 
   name: 'friend-template', 
   foreach: friends, 
   as: 'frnz' 
}"></div>

Diventa facile fare riferimento agli oggetti genitore dall'interno dei cicli foreach creando alias. Questa funzionalità è utile quando il codice è complesso e annidato a più livelli.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - using alias in Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <ul data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends, 
         as: 'frnz' 
      }"></ul>

      <script type = "text/html" id = "friend-template">
         <li>
            <h3 data-bind = "text: name"></h3>
            <span>Contact Numbers</span>
            <ul data-bind = "template: { 
               name : 'contacts-template', 
               foreach:contactNumber, 
               as: 'cont'
            } "></ul>
            <p>Email-id: <span data-bind = "text: email"></span></p>
         </li>
      </script>

      <script type = "text/html" id = "contacts-template">
         <li>
            <p><span data-bind = "text: cont"></span></p>
         </li>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = ko.observableArray ( [
               { 
                  name: 'Smith', 
                  contactNumber: [ 4556750345, 4356787934 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Jack', 
                  contactNumber: [ 6789358001, 3456895445 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Lisa', 
                  contactNumber: [ 4567893131, 9876456783, 1349873445 ],  
                  email: '[email protected]' 
               }
            ]);
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato template-as-alias.htm file.
Apri questo file HTML in un browser.
Alias viene utilizzato al posto del nome completo degli array.

Utilizzo di afterAdd, beforeRemove e afterRender

Esistono situazioni in cui è necessario eseguire una logica personalizzata aggiuntiva sugli elementi DOM creati dal modello. In tal caso, è possibile utilizzare i seguenti callback. Considera che stai usando foreach element quindi -

afterAdd - Questa funzione viene richiamata quando un nuovo elemento viene aggiunto all'array menzionato in foreach.

beforeRemove - Questa funzione viene richiamata appena prima di rimuovere l'elemento da un array menzionato in foreach.

afterRender - La funzione qui menzionata viene richiamata ogni volta che viene eseguito il rendering di foreach e vengono aggiunte nuove voci all'array.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Use of afterRender Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends , 
         afterRender: afterProcess
      }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
         <button data-bind = "click: $root.removeContact">remove </button>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            self = this;
            this.friends = ko.observableArray ([
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
            ])

            this.afterProcess = function(elements, data){
               $(elements).css({color: 'magenta' });
            }

            self.removeContact = function() {
               self.friends.remove(this);
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato template-afterrender.htm file.
Apri questo file HTML in un browser.
Qui, la funzione afterProcess viene eseguita ogni volta che viene eseguito il rendering di foreach.

Scegliere il modello in modo dinamico

Se sono disponibili più modelli, è possibile sceglierne uno dinamicamente impostando il nome come observableparametro. Quindi, il valore del modello verrà rivalutato quando il parametro del nome cambia e, a sua volta, i dati verranno nuovamente renderizzati.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Dynamic Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: whichTemplate, 
         foreach: friends 
      }"></div>

      <script type = "text/html" id = "only-phon">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
      </script>

      <script type = "text/html" id = "only-email">
         <h3 data-bind = "text: name"></h3>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
   
            this.friends = ko.observableArray ([
               {
                  name: 'Smith', 
                  contactNumber: 4556750345, 
                  email: '[email protected]', 
                  active: ko.observable(true)
               },
               
               {
                  name: 'Jack', 
                  contactNumber: 6789358001, 
                  email: '[email protected]', 
                  active: ko.observable(false)
               },
            ]);

            this.whichTemplate = function(friends) {
               return friends.active() ? "only-phon" : "only-email";
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato template-dynamic.htm file.
Apri questo file HTML in un browser.
Il modello da utilizzare viene deciso in base al valore del flag attivo.

Utilizzo di motori basati su stringhe esterne

La creazione di modelli nativi funziona perfettamente con vari elementi del flusso di controllo anche con blocchi di codice annidati. KO offre anche un modo per integrarsi con la libreria di modelli esterni come Underscore Templating Engine o JQuery.tmpl.

Come accennato sul sito ufficiale, JQuery.tmpl non è più in fase di sviluppo attivo da dicembre 2011. Pertanto, il templating nativo di KO è consigliato solo al posto di JQuery.tmpl o qualsiasi altro motore di template basato su stringhe.

Fare riferimento al sito ufficiale per maggiori dettagli su questo.

↰ Previous page Next page ↱

KnockoutJS - Templating

Osservazioni

Rendering di un modello con nome

Utilizzo di "foreach" in Template

Creazione di alias utilizzando come parola chiave per elementi foreach

Utilizzo di afterAdd, beforeRemove e afterRender

Scegliere il modello in modo dinamico

Utilizzo di motori basati su stringhe esterne

Tutorial di KnockoutJS