Post
Ask Question

Dynamic HTML Using Handlebars JavaScript

Introduction

Dynamic HTML

The concept of DHTML was Introduced in 1997 by Microsoft with the launch of Internet Explorer 4 to create interactive Websites with the combinations of multiple technologies, i.e. HTML, JavaScript, CSS, and later Server-side technologies.

HTML

The main reason for dynamic HTML was to introduce reusability of the code for data-bound Web content, i.e., when using data in lists, tables, etc., that requires a large amount of data to be displayed but with similar styling or visual format.

Not only this, but it was also to induce more user interactivity e.g., displaying customized messages into a customized HTML message box instead of just displaying typical alerts during the system response for every user action. These requirements for modern state-of-the-art Websites with more user-friendliness and user interactivity in play require more versatile techniques from the front-end side.

Before I jump into what handlebars JavaScript is all about, let me share some examples of usage of dynamic HTML. 

Code

<body>
  <div id="box">Apple, Pear, Banana</div>
  <script>
    const box = document.getElementById('box');
    box.addEventListener('mouseover', function handleMouseOver() {
      box.style.color = 'green';
      box.style.fontSize = '30px';
    });
    box.addEventListener('mouseout', function handleMouseOut() {
      box.style.color = 'black';
      box.style.fontSize = '20px';
    });
  </script>
</body>

Output

Output

The sample snippet given above will change the color of the text to green and change the font size of the text when a mouse cursor moves over to the text.

<body>
<div id="box">Some text here</div>
    <button id="btn">Button</button>
  </body>
  <script>
    const btn = document.getElementById('btn');

    btn.addEventListener('click', function onClick(event) {
      const box = document.getElementById('box');

      box.style.color = 'salmon';
    });
  </script>
</body>

Output

Output 

The sample snippet given above will change the color of the text to green, change the font size of the text, change the heading, and insert a new line of code when the page is clicked anywhere.

The techniques given above will put more burden on the front-end coding side and are not very modular and cohesive in nature. As the dynamic HTML domain matures, a new technique of front-end template is being introduced, and many JavaScript-based libraries like mustache, handlebars, and many more are introduced.

Today, I shall be discussing some basic features of handlebars JavaScript-based front-end dynamic HTML template libraries.

Handlebars JavaScript is a client-side template engine that separates HTML from JavaScript to create dynamic HTML. The code is easily managed, the learning curve is easy, and data interpolation is easy;  i.e., data values coming from the Server-side can easily insert into the template instead of the traditional approach given below by using the string i.e. val = "some text" + data.

Handlebars template engine has built-in helpers and allows the developer to add custom helpers. It also allows us to use the template within a complex template.

Handlebars Template Engine Functional Flow

Functional flow

The functional flow of the handlebars template engine is given below.

  1. Handlebars template is converted into function by handlebars compiler.
  2. The data will be passed to the converted function.
  3. The converted function will return to HTML, which is required.
  4. The Browser then renders HTML.

Options to Include Handlebars JavaScript

  1. Inline inclusion inside HTML page with “<script id="template-id" type="text/x-handlebars-template">Define template</script>”.
  2. Create an external template using the ".handlebars" extension.

Handlebars syntax

  1. {{}} - Any variable inside these will be rendered as string data.
  2. {{{}}} - This will render HTML tags define inside a string data.
  3. {{!—variable--}} - Use for the comments.
  4. {{#}} – {{/}} - Use for block expression e.g. if statement.
  5. ../ - Reference parent variable within JSON data.
  6. if, each, unless & within -> Built-in helpers.

Custom Helpers

  1. Function Helpers- Implements simple logic to get HTML.
  2. Block Helpers - Implements complex logic to get HTML.

Handlebars Template Engine Execution Flow

The execution flow of the handlebars template engine is described, as shown below.

  1. Define the template that is packed with handlebars JavaScript syntax.
  2. Compile the template with the handlebars using the JavaScript compile method.
  3. Provide the data context i.e. data from the server side in the form of JSON to map to the template.
  4. Insert or append the final HTML into your designated DOM location of the HTML page.

Examples

You can follow the step-by-step examples below or download the below examples. All examples are created in a plain Notepad editor.

Basic "Hello World"

  1. Open the Notepad editor, create an HTML page, and name it "basic-1.html".
  2. Open the page in the Notepad editor and paste the code below in it i.eIn the code above; I have created a simple handlebars JavaScript template, which will display a customized message with the customized name. Thus, let's see the code given above step by step i.e.
<html>    
    
<head>    
    <title> Basic-1 Demo Handlebars JavaScript </title>    
    <script src="js/handlebars-v4.0.5.js"></script>    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
    <script>    
        $(document).ready(function() {    
            // Retrieve the template data from the HTML (jQuery is used here).    
            var template = $('#basic-template1').html();    
            // Compile the template data into a function    
            var templateScript = Handlebars.compile(template);    
            // Define data in JSON format.    
            var context = {    
                "WelcomMsg": "Hello World!",    
                "name": "Handlebars Template Engine"    
            };    
            // Pass Data to template script.    
            var html = templateScript(context);    
            // Insert the HTML code into the page    
            $(document.body).append(html);    
        });    
    </script>    
</head>    
    
<body> </body>    
<script id="basic-template1" type="text/x-handlebars-template">    
    <div> {{WelcomMsg}} I am a {{name}}. </div>    
</script>    
    
</html>

The code given above after the body tag is a simple handlebars JavaScript template that follows handlebars template engine syntax.

<script>    
    $(document).ready(function() {    
        // Retrieve the template data from the HTML (jQuery is used here).    
        var template = $('#basic-template1').html();    
        // Compile the template data into a function    
        var templateScript = Handlebars.compile(template);    
        // Define data in JSON format.    
        var context = {    
            "WelcomMsg": "Hello World!",    
            "name": "Handlebars Template Engine"    
        };    
        // Pass Data to template script.    
        var html = templateScript(context);    
        // Insert the HTML code into the page    
        $(document.body).append(html);    
    });    
</script>

The piece of code given above is written inside the head tag. You can also create external JavaScript for it and then reference it on your HTML page. In the code given above, I retrieve my template first by the template ID that I have allocated for it, then compile my template to convert it into a function. I then define my sample JSON data context, then I pass my data context to my template, and finally, I insert my template into the body tag.

Observe here that in the code above, my JSON data key are data context variables that I will reference in my template.

Save & Open the "basic-1.html" file in the Browser. You will see the output given below i.e.

Hello World

Function Helper

  1. Open the page in the Notepad editor and paste the code given below in it i.e.
  2. Open the Notepad editor, create an HTML page, and name it "function_helper.html".
<html>    
    
<head>    
    <title> Function Helper Demo Handlebars JavaScript </title>    
    <script src="js/handlebars-v4.0.5.js"></script>    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
    <script>    
        $(document).ready(function() {    
            // Register helper before compiling the template.    
            // "result" is name of the helper function.    
            Handlebars.registerHelper("result", function(marks) {    
                if (marks >= 50) {    
                    return "<span style='color: green'>passed</span>";    
                } else {    
                    return "<span style='color: red'>failed</span>";    
                }    
            })    
            // Retrieve the template data from the HTML (jQuery is used here).    
            var template = $('#basic-template1').html();    
            // Compile the template data into a function    
            var templateScript = Handlebars.compile(template);    
            // Define data in JSON format.    
            var context = {    
                "department": "Computer Science",    
                "course": {    
                    "name": "Web Programming"    
                },    
                "students": [{    
                    "fullname": "Asma Khalid",    
                    "marks": "50"    
                }, {    
                    "fullname": "Muhammad Bilal Amjad",    
                    "marks": "80"    
                }, {    
                    "fullname": "John",    
                    "marks": "30"    
                }]    
            };    
            // Pass Data to template script.    
            var html = templateScript(context);    
            // Insert the HTML code into the page    
            $(document.body).append(html);    
        });    
    </script>    
</head>    
    
<body> </body>    
<script id="basic-template1" type="text/x-handlebars-template">    
    <div>    
        <h3>This is {{course.name}} course.</h3> {{#each students}} <span style="color: blue"> <b>{{fullname}}</b></span> has {{{result marks}}} the {{../course.name}} course of {{../department}} department.<br/><br/> {{/each}} </div>    
</script>    
    
</html>

In the code above, we have defined our template after the body tag and processed our template inside the head tag.

<script id="basic-template1" type="text/x-handlebars-template">    
    <div>    
        <h3>This is {{course.name}} course.</h3>     
        {    
          {    
            #each students    
          }    
        }     
<span style="color: blue"> <b>{{fullname}}    
  </b>    
    </span> has {{{result marks}}} the {{../course.name}} course of {{../department}} department.<br/><br/> {{/each}}     
</div>     
t;/script>

In this new template, we use a built-in function, i.e. #each, to loop through our list of JSON data, as defined in the data context.

// Register helper before compiling the template.    
// "result" is name of the helper function.    
Handlebars.registerHelper("result", function(marks) {    
    if (marks >= 50) {    
        return "<span style='color: green'>passed</span>";    
    } else {    
        return "<span style='color: red'>failed</span>";    
    }    
})

The code above defines our custom helper function, which will return a string based on the marks. In our provided template, the "{{{result marks}}}" line will call our custom-defined helper and pass the mark data from our provided JSON into it.

Save & Open the "function_helper.html" file in the Browser. You will see the following output i.e.

Block Paths

  1. Open Notepad Editor, create an HTML page, and name it "block_paths.html".
  2. Open the page in Notepad Editor and paste the code given below in it i.e. 
    <html>    
    
<head>    
    <title> Block & Path Demo Handlebars JavaScript </title>    
    <script src="js/handlebars-v4.0.5.js"></script>    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
    <script>    
        $(document).ready(function() {    
            // Retrieve the template data from the HTML (jQuery is used here).    
            var template = $('#basic-template1').html();    
            // Compile the template data into a function    
            var templateScript = Handlebars.compile(template);    
            // Define data in JSON format.    
            var context = {    
                "department": "Computer Science",    
                "course": {    
                    "name": "Web Programming"    
                },    
                "students": [{    
                    "fullname": "Asma Khalid"    
                }, {    
                    "fullname": "Muhammad Bilal Amjad"    
                }]    
            };    
            // Pass Data to template script.    
            var html = templateScript(context);    
            // Insert the HTML code into the page    
            $(document.body).append(html);    
        });    
    </script>    
</head>    
    
<body> </body>    
<script id="basic-template1" type="text/x-handlebars-template">    
    <div>    
        <h3>This is {{course.name}} course.</h3> {{#each students}} My name is <span style="color: blue"> <b>{{fullname}}</b></span>. I enroll in {{../course.name}} course and my department is {{../department}}.<br/><br/> {{/each}} </div>    
</script>    
    
</html>

    In the code given above, what we have altered in our template is that inside the #, each loop is trying to access the data that is not in the current context of #each loop. "{{../course.name}}" line of code moves back by using "../" and accesses the data which is out of context of the current #each loop.

  3. Save & Open the "block_paths.html" file in the Browser. You will see the output given below i.e.

Block Helper

  1. Open the Notepad editor, create an HTML page, and name it "block_helper.html".
  2. Open the page in the Notepad editor and paste the code given below in it i.e. 
    <html>    
    
<head>    
    <title> Block Helper Demo Handlebars JavaScript </title>    
    <script src="js/handlebars-v4.0.5.js"></script>    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
    <script>    
        $(document).ready(function() {    
            // Register helper before compiling the template.    
            // "result" is name of the helper function.    
            Handlebars.registerHelper("result", function(data, options) {    
                var len = data.length;    
                var returnData = "";    
                for (var i = 0; i < len; i++) {    
                    // change the value of the passingYear to    
                    // passed/not passed based on the conditions.    
                    data[i].status = (data[i].marks >= 50) ? "<span style='color: green'>passed</span>" : "<span style='color: red'>failed</span>";    
                    // here options.fn(data[i]) temporarily changes the    
                    // scope of the whole studyStatus helper    
                    // block to data[i]. So {{name}}=data[i].name    
                    // in the template.    
                    returnDatareturnData = returnData + options.fn(data[i]);    
                }    
                return returnData;    
            });    
            // Retrieve the template data from the HTML (jQuery is used here).    
            var template = $('#basic-template1').html();    
            // Compile the template data into a function    
            var templateScript = Handlebars.compile(template);    
            // Define data in JSON format.    
            var context = {    
                "department": "Computer Science",    
                "course": {    
                    "name": "Web Programming"    
                },    
                "students": [{    
                    "fullname": "Asma Khalid",    
                    "marks": "50"    
                }, {    
                    "fullname": "Muhammad Bilal Amjad",    
                    "marks": "80"    
                }, {    
                    "fullname": "John",    
                    "marks": "30"    
                }]    
            };    
            // Pass Data to template script.    
            var html = templateScript(context);    
            // Insert the HTML code into the page    
            $(document.body).append(html);    
        });    
    </script>    
</head>    
    
<body> </body>    
<script id="basic-template1" type="text/x-handlebars-template">    
    <div>    
        <h3>This is {{course.name}} course.</h3> {{#result students}} <span style="color: blue"> <b>{{fullname}}</b></span> has {{{status}}} the {{../course.name}} course of {{../department}} department.<br/><br/> {{/result}} </div>    
</script>    
    
</html>
    The piece of code given above uses advanced techniques of the template engine i.e. block helper. What we did in it is change our context at the run time in our template; instead of using #each the built-in helper, we use our custom-defined helper i.e. #result 
    {    
    {#    
        result students    
    }    
} < span style = "color: blue" > < b > {    
    {    
        fullname    
    }    
} < /b></span > has {    
    {    
        {    
            status    
        }    
    }    
}    
the {    
    {.. / course.name    
    }    
}    
course of {    
    {.. / department    
    }    
}    
department. < br / > < br / > {    
        {    
            /result}}    
            // Register helper before compiling the template.    
            // "result" is name of the helper function.    
            Handlebars.registerHelper("result", function(data, options) {    
                var len = data.length;    
                var returnData = "";    
                for (var i = 0; i < len; i++) {    
                    // change the value of the passingYear to    
                    // passed/not passed based on the conditions.    
                    data[i].status = (data[i].marks >= 50) ? "<span style='color: green'>passed</span>" : "<span style='color: red'>failed</span>";    
                    // here options.fn(data[i]) temporarily changes the    
                    // scope of the whole studyStatus helper    
                    // block to data[i]. So {{name}}=data[i].name    
                    // in the template.    
                    returnDatareturnData = returnData + options.fn(data[i]);    
                }    
                return returnData;    
            });
  3. Save & open the "block_helper.html" file in the Browser. You will see the output given below i.e.

Partial Template

  1. Open Notepad Editor, create an HTML page, and name it "partial_template.html".
  2. Open the page in Notepad Editor and paste the code given below in it i.e. 
    <html>    
    
<head>    
    <title> Partial Template Demo Handlebars JavaScript </title>    
    <script src="js/handlebars-v4.0.5.js"></script>    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
    <script>    
        $(document).ready(function() {    
            // Register partial template before compiling the template.    
            // "templateName" is name of the helper function.    
            Handlebars.registerPartial('partial', 'I enroll in {{courseName}} course and my department is {{department}}.');    
            // Retrieve the template data from the HTML (jQuery is used here).    
            var template = $('#basic-template1').html();    
            // Compile the template data into a function    
            var templateScript = Handlebars.compile(template);    
            // Define data in JSON format.    
            var context = {    
                "students": [{    
                    "fullname": "Asma Khalid",    
                    "department": "Computer Science"    
                }, {    
                    "fullname": "Muhammad Bilal Amjad",    
                    "department": "Computer Science"    
                }, {    
                    "fullname": "John",    
                    "department": "Computer Science"    
                }]    
            };    
            // Pass Data to template script.    
            var html = templateScript(context);    
            // Insert the HTML code into the page    
            $(document.body).append(html);    
        });    
    </script>    
</head>    
    
<body> </body>    
<script id="basic-template1" type="text/x-handlebars-template">    
    <div> {{#each students}} My name is <span style="color: blue"> <b>{{fullname }}</b></span>. {{> partial courseName = "Game Development" department = "IT"}} <br/><br/> {{/each}} </div>    
</script>    
    
</html>
    In the piece of code given above, we have defined our partial template and passed the values to our partial template on the run time while accessing our partial template from within our template as "{{> partial courseName = "Game Development" department = "IT"}}"."
  3. Save & Open the "partial_template" file in the Browser. You will see the output given below i.e. 

Conclusion

You learned about the handlebars template engine and dynamic HTML basic in this post. You also learned about the functional flow, syntax, and execution flow of the handlebars template engine. You also learned the basics of the handlebars template engine through some of the basic handlebars template engine examples. You also learned about the basics of dynamic HTML.


Similar Articles