HelpBot Assistant

How can I help you?

Template Engine

6 Feb 20266 minutes to read

Syncfusion® JavaScript (Essential® JS 2) includes a built-in template engine that compiles template strings into executable functions. The compiled function renders DOM elements using supplied data, enabling efficient and reusable rendering for complex UI templates.

Compiling

Use the compile method from ej2-base to convert template strings into executable functions.

// data
var data = { name: 'Aston Martin' };

// Compiling template string into executable function
var getDOMString = ej.base.compile('<div>${name}</div>');

// Using generated function to get output element collection
var output = getDOMString(data);

// append html collection to element
document.getElementById('element').appendChild(output[0]);
<!DOCTYPE html><html lang="en"><head>
    <title>Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

To enable strict Content Security Policy (CSP), it is recommended to utilize the function template approach instead of the string template.

Available template syntax

Name Syntax Description
Expression <div>${name}</div> We have expression evolution as like ES6 expression string literals.
Dot Variable Access <div>${person.info.name}</div> Access the json variable with dot notation.
Variable Function <div>${name.toUpperCase()}</div> Utilize the variable function example, name.toUpperCase()
Window Function <div>${getCurrentTime()}div> Use window function inside template.Note: Here, getCurrentTime() is a function that defined in the window object.
Custom Helper Function <div>${covertToCurrency()}div> Use function that passed in helper function.
IF Else Statement <div>
${if(gender===”male”)}
<span class=’ico-male’>Male</span>
${else}
<span class=’ico-female’>Female</span>
${/if}
</div> 		Branching statement in Template.
For Statement <div>
${for(mark of marks)}
<span>${mark}</span>
${/for}
</div> 		Use for looping inside template.
For Index value access <div>
${for(mark of marks)}
<span>${markIndex}</span>
${/for}
</div> 		Get the index value of item while using for statement. Use the variable Index that suffixed with loop item name.

Custom helper

Custom helper functions can be defined and passed to the compile function to extend template behavior. Refer to the example below for usage.

var customHelper = {
    upperCase: function upperCase(str) {
        return str.toUpperCase();
    }
};

var data = { name: 'Aston Martin' };

var getDOMString = ej.base.compile('<div>${upperCase(name)}</div>', customHelper);

let opElem = getDOMString(data);

document.getElementById('element').appendChild(opElem[0]);
<!DOCTYPE html><html lang="en"><head>
    <title>Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>