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