This topic demonstrates how to create basic substitution template using the templating engine
The following table lists the topics required as a prerequisite to understanding this topic.
Adding Templating Engine References: This topic gives information on what is the minimal set of necessary Java Script files to start using the templating engine
Templating Engine Overview: This topic contains information regarding the features supported by the templating Engine
This topic contains the following sections:
In this example basic substitution template is created and the result is appended to a html table.
The following screenshot is a preview of the final result.
To complete the procedure you need the following:
The following steps demonstrate how to create basic substitution template.
Add and apply the row template using IG Template Engine
Add sample data and row template to the page.
In JavaScript:
<script type="text/javascript">
var employees = [
{ firstName: "Joseph", lastName: "Sommers", age: 17 },
{ firstName: "Anna", lastName: "Paterson", age: 25}];
var template = '<tr><td><b>ID: </b>$i</td><td><b>First Name: </b>${firstName}</td><td><b>Last Name: </b>${lastName}</td></tr>';
</script>
In HTML:
<body>
<table id="resultTable" style="border: 1px solid #000;"></table>
</body>
Apply the template and append the result to the html table.
In JavaScript:
<script type="text/javascript">
$(document).ready(function () {
var result = $.ig.tmpl(template, employees);
$('#resultTable').html(result);
});
</script>
(Optional) Verify the result
Save the file and double click to preview the result.
The following topics provide additional information related to this topic.
Templating Engine Overview: This topic lists the topics with all the information related to the templating engine.
Creating an Alternating Rows Template: This topic demonstrates how to create alternative row template using the templating engine.
Creating a Basic Conditional Template: This topic demonstrates how to create basic conditional template using the templating engine.
Creating a Complex Property Substitution Template: This topic demonstrates how to create complex property substitution template using the templating engine.
Creating a Conditional Template Containing a Default Statement: This topic demonstrates how to create conditional template containing a default statement using the templating engine
Creating a Multi-Conditional Template Containing a Default Statement: This topic demonstrates, with code examples, how to create multi-conditional template containing a default statement using the templating engine.
Creating a Nested Blocks Template: This topic demonstrates how to create nested blocks template using the templating engine
View on GitHub