KnockoutJS - Création de modèles

Templateest un ensemble d'éléments DOM qui peuvent être utilisés de manière répétitive. La création de modèles facilite la création d'applications complexes en raison de sa propriété de minimiser la duplication des éléments DOM.

Il existe 2 façons de créer des modèles.

  • Native templating- Cette méthode prend en charge les liaisons de flux de contrôle telles que foreach, with et if. Ces liaisons capturent le balisage HTML existant dans l'élément et l'utilisent comme modèle pour les éléments aléatoires. Aucune bibliothèque externe n'est requise pour ce modèle.

  • String-based templating- KO se connecte au moteur tiers pour lui transmettre les valeurs ViewModel et injecte le balisage résultant dans le document. Par exemple, JQuery.tmpl et Underscore Engine.

Syntax

template: <parameter-value>

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

Notez que type est fourni comme text/html dans le bloc de script pour notifier à KO que ce n'est pas un bloc exécutable mais simplement un bloc modèle qui doit être rendu.

Parameters

La combinaison des propriétés suivantes peut être envoyée comme valeur de paramètre au modèle.

  • name - Ceci représente le nom du modèle.

  • nodes- Ceci représente un tableau de nœuds DOM à utiliser comme modèle. Ce paramètre est ignoré si le paramètre de nom est passé.

  • data - Ce ne sont que des données à afficher via le modèle.

  • if - Le modèle sera servi si la condition donnée donne une valeur vraie ou vraie.

  • foreach - Pour servir le modèle au format foreach.

  • as - C'est juste pour créer un alias dans l'élément foreach.

  • afterAdd, afterRender, beforeRemove - Tous ces éléments représentent des fonctions appelables à exécuter en fonction de l'opération effectuée.

Observations

Rendu d'un modèle nommé

Les modèles sont définis implicitement par le balisage HTML à l'intérieur du DOM lorsqu'ils sont utilisés avec des liaisons de flux de contrôle. Cependant, si vous le souhaitez, vous pouvez factoriser les modèles dans un élément distinct, puis les référencer par leur nom.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans template-named.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Ici, le modèle ami est utilisé 2 fois.

Utilisation de "foreach" dans le modèle

Voici un exemple d'utilisation foreach paramètre ainsi que le nom du modèle.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans template-foreach.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Ici, le contrôle foreach est utilisé dans la liaison de modèle.

Création d'alias en utilisant comme mot-clé pour chaque élément

Voici comment créer un alias pour un élément foreach -

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

Il devient facile de faire référence aux objets parents depuis l'intérieur des boucles foreach en créant un alias. Cette fonctionnalité est utile lorsque le code est complexe et imbriqué à plusieurs niveaux.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans template-as-alias.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • L'alias est utilisé à la place du nom complet des tableaux.

Utilisation de afterAdd, beforeRemove et afterRender

Il existe des situations dans lesquelles une logique personnalisée supplémentaire doit être exécutée sur des éléments DOM créés par le modèle. Dans ce cas, les rappels suivants peuvent être utilisés. Considérez que vous utilisez alors l'élément foreach -

afterAdd - Cette fonction est appelée lorsqu'un nouvel élément est ajouté au tableau mentionné dans foreach.

beforeRemove - Cette fonction est appelée juste avant de supprimer l'élément d'un tableau mentionné dans foreach.

afterRender - La fonction mentionnée ici est invoquée chaque fois que foreach est rendu et de nouvelles entrées sont ajoutées au tableau.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans template-afterrender.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Ici, la fonction afterProcess est exécutée chaque fois que foreach est rendu.

Choisir un modèle dynamiquement

S'il y a plusieurs modèles disponibles, alors l'un peut être choisi dynamiquement en faisant le nom comme observableparamètre. Par conséquent, la valeur du modèle sera réévaluée à mesure que le paramètre de nom change et les données seront à leur tour restituées.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans template-dynamic.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Le modèle à utiliser est décidé en fonction de la valeur de l'indicateur actif.

Utilisation de moteurs basés sur des chaînes externes

Les modèles natifs fonctionnent parfaitement avec divers éléments de flux de contrôle, même avec des blocs de code imbriqués. KO offre également un moyen d'intégrer une bibliothèque de modèles externe comme Underscore templating Engine ou JQuery.tmpl.

Comme mentionné sur le site officiel, JQuery.tmpl n'est plus en développement actif depuis décembre 2011. Par conséquent, le modèle natif de KO n'est recommandé qu'à la place de JQuery.tmpl ou de tout autre moteur de modèle basé sur des chaînes.

Veuillez vous référer au site officiel pour plus de détails à ce sujet.