Search results

Template Engine

Syncfusion JavaScript (ES5) 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.

Source
Preview
index.js
index.html
// 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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.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>

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.

Source
Preview
index.js
index.html
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.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>