Template Engine

3 Jul 20235 minutes to read

Syncfusion JavaScript (Essential JS 2) has built-in template engine which provides options to compile template string into a executable function. Then the generated executable function can be used for rendering DOM element using desired data.

Compiling

compile method from ej2-base can be used to convert our template strings into executable functions.

import { compile } from '@syncfusion/ej2-base';

// data
let data: object = { name: 'Aston Martin' };

// Compiling template string into executable function
let getDOMString: (data: object) => NodeList = compile('<div>${name}</div>');

// Using generated function to get output element collection
let output: NodeList = 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/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</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 function can be defined and passed to compile function. Refer to the following example.

import { compile } from '@syncfusion/ej2-base';

let customHelper: Object = {
    upperCase: (str: string) => {
        return str.toUpperCase();
    }
};

let data: object = { name: 'Aston Martin' };

let getDOMString: (data: object) => HTMLCollection = compile('<div>${upperCase(name)}</div>', customHelper);

let opElem: HTMLCollection = 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/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>