Creating A Custom Handlebar Expression Helper -Tutorial Savvy

Handlebar Expression Helper are used for creating custom/user defined templates.

You can see my previous post in basics of Handlebars.

In this Demo, “We are going to see How to create a Custom Expression Helper“.

Custom Expression helpers are very helpful as it can be called inside a Handlebar template.While compiling the handlebar template it looks for nay used custom helper defined inside.Then it resoles those helpers and generates the compiled template.

In my previous post on handlebar we have seen a student detail table rendered in the browser.In this post we are going to extend the previous demo and create a helper which will check the student marks.If a student has less then 200 then it attaches a “FAIL” string with maroon color else the student is considered as “PASS“.

The demo structure is as below:-

The test markup for this demo is as below,

<!DOCTYPE html>
<html>
<head>
    <title>HandleBar Templating </title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        #my-container{
            width: 400px;
            border: 1px solid grey;
        }
        .pass{
            color:green;
        }
        .fail{
            color:darkred;
        }
     </style>
</head>
    <body>
        <div id="my-container" class="table-responsive">
        </div>
        <!--Handlebar templates start-->
        <script id="student-template" type="text/x-handlebars-template">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Mark</th>
                    <th>Subject</th>
                </tr>
                </thead>
                <tbody>
                {{#each students}}
                <tr>
                    <td>{{ this.name }}</td>
                    <td>{{customMarker this.mark }}</td>
                    <td>{{ this.subject }}</td>
                </tr>
                {{/each}}
                </tbody>
            </table>
        </script>
        <!--Handlebar templates end-->
        <script src="lib/jquery-1.10.2.min.js"></script>
        <script src="lib/handlebars.js"></script>
        <script src="js/my-custom-helper-script.js"></script>
        <script src="js/my-script.js"></script>
    </body>
</html>

A custom helper can be created using registerHelper() method and passing the name and a function to it.The function takes the input of the current value it is applied to and returns the modified value to be used in markup.The below code displays a custom helper named “customMarker” which takes the student mark and checks its value against 200 to determine the pass or fail and accordingly attached the string and returns it back.

/**
 * Created by saan on 10/12/13.
 */
$(document).ready(function(){

    Handlebars.registerHelper("customMarker", function(studentMark) {

        if(studentMark > 200){
            return new Handlebars.SafeString(studentMark +"<b class='pass'> PASS </b>");
        }else{
            return new Handlebars.SafeString(studentMark +"<b class='fail'> FAIL </b>");
        }
    })

});

A custom helper can be called like {{< helpername> <value>}}.

The below JavaScript code is for calling the student json data and compiling the handlebar template.

/**
 * Created by saan on 10/11/13.
 */

var STUDENT_METHOD ={

        handlerData:function(resJSON){

            var templateSource   = $("#student-template").html(),

                template = Handlebars.compile(templateSource),

                studentHTML = template(resJSON);

           $('#my-container').html(studentHTML);
            console.log($("#student-template"))
        },
        loadStudentData : function(){

            $.ajax({
                url:"http://localhost:63342/HandleBarDemo/data/studentData.json",
                method:'get',
                success:this.handlerData

            })
        }
};

$(document).ready(function(){

    STUDENT_METHOD.loadStudentData();
});