Prototype - Templating

Advertisements

Previous Page
Next Page  

Templates are used for formatting group of similar objects and to produce formatted output for these objects.

Prototype provides a Template class, which has two methods −

  • Template() − This is a constructor method, which is used to create a template object and call evaluate() method to apply template.

  • evaluate() − This method is used to apply a template to format an object.

There are three steps involved to create the formatted output.

  • Create a template − This involves creating preformatted text. This text contains formatted content along with #{fieldName} values. These #{fieldName} values will be replaced by the actual values when evaluate() method will be called with the actual values.

  • Defining actual values − This involves creating actual values in the form of Keys and Values. These Keys will be mapped in the template and will be replaced by the corresponding values.

  • Mapping Keys and replacing Values − This is the final step where evaluate() will be called and all the keys available in the formatted object will be replaced by the defined values.

Example1

Step 1

Create a template.

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

Step 2

Prepare our set of values, which will be passed in the above object to have a formatted output.

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 ];

Step 3

Final step is filling up all the values in the template and producing final result as follows −

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

So, let's put all these three steps together −

<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>

This will produce the following result −

Output

Advertisements