Introduction
This chapter demonstrates about the Prototype.js Template which is the formatting group of similar objects to produce the output and following are the concepts are covered in this chapter.
- Prototype methods
Description
In order to create the templates to produce the outputs for these Prototype provide two methods which are shown below.
Template()
Which is a constructor is used to create a object of template and call the evaluate() for template
Evaluate()
Is used to apply an template to format the object.
User can get the formatted output by following the below steps.
Creating Template
Which includes making preformatted content which contains formatted content alongside #{fieldName} values. These #{fieldName} values will be supplanted by the actual values when evaluate() method will be called with the actual values is as shown in below code.
[code]
var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
[/code]
Defining Actual Values
Which includes making actual values just like as Keys and Values. These Keys will mapped with template and will be supplanted by the relating values. Is as shown in below code.
[code]
var record1 = {title: 'java', author:'Ken Arnold'};
var record2 = {title: 'HTML', author:' Yukihiro Matsumot'};
var record3 = {title: 'SVG', author:'W3c'};
var record4 = {title: 'Ruby', author:'Yukihiro Matsumoto'};
var records = [record1, record2, record3, record4 ];
[/code]
Replacing Values and Mapping Keys
Which is the final step i.e evaluate() will be called and all the keys were accessible in the formated object will be supplanted by the characterized values as shown in below snippet.
[code]
records.each( function(conv) {
alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});
[/code]
The code below demonstrates to generating template by using above three steps as shown.
[html]
<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: 'java', author:'Ken Arnold'};
var record2 = {title: 'HTML', author:' Yukihiro Matsumot'};
var record3 = {title: 'SVG', author:'W3c'};
var record4 = {title: 'Ruby', author:'Yukihiro Matsumoto'};
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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Template produce format objects.
- Template apply evaluate method.
- Template key values will be replace by corresponding values.