Copyright © tutorialspoint.com

# Prototype Templating

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 formatted output.

1. 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 actual values.

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

3. 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 following result:

    The TV show Metrix was directed by Arun Pandey.
    The TV show Junoon was directed by Manusha.
    The TV show Red Moon was directed by Paul, John.
    The TV show Henai was directed by Robert.

To understand it in better way you can Try it yourself.

Copyright © tutorialspoint.com