Version

Creating a Complex Property Substitution Template

Topic Overview

Purpose

This topic demonstrates how to create complex property 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 Complex Property Substitution Template

Introduction

In this example complex substitution template is created and the result is appended to an html table. The complex property substitution template takes the values from the personal property with sub-properties firstName and lastName.

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 a complex property 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 = [
     { personal: { 
         firstName: "Tom",
         lastName: "Wickens" 
         },
         position: "Team Lead"
     },
     { personal: { 
         firstName: "Jessica",
         lastName: "Alba"
         },                  
       position: 'Architect'
     }];
 var template = '<tr><td><b>First Name: </b>${personal.firstName}</td>' + '<td><b>Last Name: </b>${personal.lastName}</td>' + '<td><b>Position: </b>${position}</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