How to use handlebars in grails

Posted By : Shiv Kumar | 01-Jul-2014

Sometime we have required to update or insert some data in DOM after an ajax call and we do this by manually creating html markup to show the ajax response.

It looks very much handy if we have insert very much data in DOM. But using handlebars we can get out of this problem as handler provides the option of javascript templating.

It makes the task DOM updation and insertion by using the handlebars expression which are very each to use and the handlebar templates are mostly similar to html structure.

Structure to define a handlebar template is :

<script id="template_Id" type="text/x-handlebars-template">
  content to placed in template

Suppose I have to update a ul after the ajax call whose response contains a JSON data.

var container = $("#ul_id");
var dataToUpdate = "<li><span>" + + "</span>" + "<div>" + data.jobDescription"</div></li>";

Suppose my JSON response contains an array of data :

  records :[
    name : "Jatin",
    jobDescription : "Software Engineer"
    name : "Nikhil",
    jobDescription : "Designer"

We can perform the same task using the handlebars and its expression very easily.

To do this we have to simple put the "contentToUpdate" in handlebars template like this :

<script id="template_Id" type="text/x-handlebars-template">
{{#each records}}      // loop to itrate through all the records

Compile a template in JavaScript by using Handlebars.compile

var source   = $("#template_Id").html();   // source now have content of handlerbars template
var data = Handlebars.compile(source);     // source code is compiled using this
$("#ul_id").append(template(data));        // now the target DOm in this case "ul_id" is updated with the ajax response.

It makes the DOM nsertion task easy and less efforts are required in this.

For more info , you can refer to




Shiv Kumar

About Author

Author Image
Shiv Kumar

Shiv is an experienced Java Developer with a strong background in multiple technologies. He specializes in defining system architectures to ensure reliable and resilient solutions. He possesses a comprehensive understanding of the latest technologies and has hands-on experience in Core Java, Spring Boot, Hibernate, Apache Kafka messaging queue, Redis, as well as relational databases like MySQL and PostgreSQL, and non-relational databases like MongoDB. He excels in API implementations, Microservices, Web Services development, testing, and deployments. Shiv actively contributes to code enhancements and consistently delivers valuable contributions to various client projects, including Fabtrack, Pando, Pandojo, Digikam, WhatsApp Integration, Croniz, Punchin Application, Script TV, Bhaasha, and more. He demonstrates strong analytical skills and a creative mindset. In addition, he has a passion for reading books and exploring new technologies and innovations.

Request for Proposal

Name is required

Comment is required

Sending message..