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 −
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.
- 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 −
No comments:
Post a Comment