Version

Creating a Basic Substitution Template

Topic Overview

Purpose

This topic demonstrates how to create basic substitution template using the templating engine

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

In this topic

This topic contains the following sections:

Creating a Basic Substitution Template

Introduction

In this example basic substitution template is created and the result is appended to a html table.

Preview

The following screenshot is a preview of the final result.

Prerequisites

To complete the procedure you need the following:

  • An empty html page with reference to the minimal set of needed js files for the templating engine. (For details, refer to Adding igTemplating References )

Steps

The following steps demonstrate how to create basic substitution template.

  1. Add and apply the row template using IG Template Engine

    1. 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>
      
    2. 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>
      
  2. (Optional) Verify the result

    Save the file and double click to preview the result.

Related Content

Topics

The following topics provide additional information related to this topic.

View on GitHub