Using Handlebars Templates to Render HTML on the Client

Home > Blogs > Developer Visual Studio / ASP.NET > Using Handlebars Templates to Render HTML on the Client

Using Handlebars Templates to Render HTML on the Client

Like This Blog 2 Dan Wahlin
Added by January 25, 2013

Using Handlebars Templates to Render HTML on the Client

As more and more functionality moves to the client it's important to convert JSON data into HTML using techniques that make maintenance easy down the road. Fortunately, there are several different template frameworks out there that can be used to generate HTML without having to write a ton of JavaScript. One of my personal favorites is called Handlebars. It's a simple client-side template framework that makes it easy to bind data to templates and generate HTML dynamically.

If you need to convert JSON data retrieved from an Ajax call to HTML, Handlebars provides a simple way to do it that makes maintenance a snap down the road. Simply define templates, retrieve your data, and then bind it to one or more templates using the Handlebars API. An example of a Handlebars template is shown next:


Notice that the template is defined inside of a <script> element and has an ID of AccountPositionsTemplate. To prevent the browser from treating the template code as JavaScript, the type attribute is set to a value of text/x-handlebars-template. This allows the template to be defined in a page without generating a script error.

Looking at the template code you can see the Handlebars binding syntax in action. The {{PositionsTotal}} token will bind the PositionsTotal property of any object assigned to the template into the HTML. In other words, it will cause the value of the property to be output along with all of the HTML defined in the template.  This provides a great way to dynamically generate HTML without having to write a lot of custom JavaScript to do it.

In situations where properties bound into a template contain a list of items such as an array, a Handlebars loop can be defined to output the values dynamically. The following template adds additional functionality into the template shown earlier and loops through an array of items defined in a Positions property:

The {{#each Positions}} syntax starts the loop and the {{/each}} syntax ends the loop. Each position that is looped through has a Security property, a Total property, and a Shares property. The Security property is a complex object containing its own properties such as Symbol, Last, Change, PercentChange and Open which will be written out in the HTML that is generated.

To bind data to the template, the template HTML must first be found and passed into the Handlebars compile() function as shown next (this code uses jQuery to find the template and retrieve it's HTML):
 


Once the template object is created it can be invoked and the data can be passed into it. This will return the HTML with the data merged in as shown next:


There's much more that can be done with Handlebars so in the next post I'll provide additional details.

For more about Handlebars, see Creating Handlebars Template Helpers.

Enjoy!
Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training

Videos You May Like

Agile Methodology in Project Management

0 149 0

In this video, you will gain an understanding of Agile and Scrum Master Certification terminologies and concepts to help you make better decisions in your Project Management capabilities. Whether you’re a developer looking to obtain an Agile or Scrum Master Certification, or you’re a Project Manager/Product Owner who is attempting to get your product or … Continue reading Agile Methodology in Project Management

JavaScript for C# Developers – September 24, 2014

0 482 3

Is JavaScript worth taking the time to learn if I’m a server-side .NET developer? How much of C# carries over to JavaScript? In this recorded video from Dan Wahlin’s webinar on September 24,2014, Dan answers these questions and more while also discussing similarities between the languages, key differences, and the future of JavaScript (ES6). If … Continue reading JavaScript for C# Developers – September 24, 2014

Detailed Forensic Investigation of Malware Infections – April 21, 2015

4 592 5

How does an investigator hunt down and identify unknown malware? In this recording of our IT Security training webinar on April 21, 2015, Security expert Mike Danseglio (CISSP / CEH) performed several malware investigations on infected computers and identify symptoms, find root cause, and follow the leads to determine what’s happening. He demonstrated his preferred … Continue reading Detailed Forensic Investigation of Malware Infections – April 21, 2015

Write a Comment

See what people are saying...

  1. Pingback: Creating Handlebars Template Helpers by Dan Wahlin

  2. Pingback: Creating Handlebars Template Helpers by Dan Wahlin

Share your thoughts...

Please fill out the comment form below to post a reply.