Open In App
Related Articles

How to use underscore.js as a template engine ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

While writing layouts for web pages, it is often the case that we require certain elements of the page to have dynamic values. For such scenarios, we use templates. Templates enable us to embed logical segments inside static HTML code, which makes the page dynamic based on the values passed in the template. To render templates, we require a template engine. In this article, we will discuss how the popular JavaScript library underscore.js can be used as a template engine.

Approach

Step 1: Writing the template

A template contains simple HTML with some embedded logical segments. Logical segments can be added in the following three ways:

<% executable javascript code %>
<%= value to be printed %>
<%- HTML escaped value to be printed %>

Step 2: Rendering the template using underscore.js:

Underscore.js provides .template() function which compiles JavaScript templates into functions that can be evaluated for rendering.

Syntax:

_.template(templateString, settings)

Parameters:

  • templateString: A string containing the template that is to be rendered.
  • settings(optional): A hash containing any _.templateSettings that should be overwritten.

Example: The below example illustrates how to use underscore.js as a template engine.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- jQuery CDN Link -->
    <script src=
    </script>
 
    <!-- underscore.js CDN Link -->
    <script type="text/javascript" src=
    </script>
 
    <style>
        .container{
            text-align: center;
        }
        .list{
            list-style: none;
        }
    </style>
</head>
 
<body>
    <script type="text/template" id="underscore_template">
        <div class="container">
            <h2 style="color: green"> <%= name %> </h2>
            <h4> <%= desc %> </h4>
            <h4> Services: </h4>
            <ol class="list">
                <% _.each(services, function(service) { %>
                    <li><%= service %></li>
                <% }); %>
            </ol>
        </div>
     </script>
    <div id="app"> </div>
    <script>
        const info = {
            name: 'GeeksforGeeks',
            desc: 'A Computer Science Portal.',
            services: [
                'Valuable Content',
                'Practice Problems',
                'POTDs'],
        }
        const underscoreTemplate =
              _.template($('#underscore_template').html())
        const structure = underscoreTemplate(info)
        $('#app').html(structure)
    </script>
</body>
 
</html>

                    

Output:

underOut

Example 2: The below code example is another implementation of using the underscore.js as template engine. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- underscore.js CDN Link -->
    <script type="text/javascript" src=
    </script>
 
    <style>
        .container {
            text-align: center;
        }
 
        .list {
            list-style: none;
        }
    </style>
</head>
 
<body>
    <script type="text/template" id="underscore_template">
        <div class="container">
            <h2 style="color: green"> <%= name %> </h2>
            <h4> <%= desc %> </h4>
            <h4> Services: </h4>
            <ol class="list">
                <% _.each(services, function (service) { %>
                    <li><%= service %></li>
                <% }); %>
            </ol>
        </div>
    </script>
    <div id="output"></div>
 
    <script>
        window.onload = function () {
            const outputDiv = document.querySelector('#output');
 
            const templateString = document.getElementById('underscore_template').innerHTML;
 
            const data = {
                "name": "GeeksforGeeks",
                "desc": "A Computer Science Portal.",
                "services": [
                    "Valuable Content",
                    "Practice Problems",
                    "POTDs"]
            };
 
            const templateFunction = _.template(templateString);
 
            outputDiv.innerHTML = templateFunction(data);
        }
    </script>
</body>
 
</html>

                    

Output:

underOut



Last Updated : 16 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads