Prototype - Création de modèles

Les modèles sont utilisés pour formater un groupe d'objets similaires et pour produire une sortie formatée pour ces objets.

Prototype fournit une classe Template , qui a deux méthodes -

Template()- Il s'agit d'une méthode constructeur, qui est utilisée pour créer un objet modèle et appeler la méthode evaluer () pour appliquer le modèle.
evaluate() - Cette méthode est utilisée pour appliquer un modèle pour formater un objet.

Il y a trois étapes impliquées pour créer la sortie formatée.

Create a template- Cela implique la création de texte préformaté. Ce texte contient un contenu formaté avec#{fieldName}valeurs. Celles-ci#{fieldName}les valeurs seront remplacées par les valeurs réelles lorsque la méthode evaluer () sera appelée avec les valeurs réelles.
Defining actual values- Cela implique la création de valeurs réelles sous la forme de clés et de valeurs. Ces clés seront mappées dans le modèle et seront remplacées par les valeurs correspondantes.
Mapping Keys and replacing Values- C'est la dernière étape où evaluer () sera appelé et toutes les clés disponibles dans l'objet formaté seront remplacées par les valeurs définies.

Exemple 1

Étape 1

Créez un modèle.

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

Étape 2

Préparez notre ensemble de valeurs, qui sera passé dans l'objet ci-dessus pour avoir une sortie formatée.

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

Étape 3

La dernière étape consiste à remplir toutes les valeurs du modèle et à produire le résultat final comme suit -

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

Alors, mettons ces trois étapes ensemble -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

Cela produira le résultat suivant -

Production