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

2 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

A Simple Introduction to Cisco CML2

0 3877 0

Mark Jacob, Cisco Instructor, presents an introduction to Cisco Modeling Labs 2.0 or CML2.0, an upgrade to Cisco’s VIRL Personal Edition. Mark demonstrates Terminal Emulator access to console, as well as console access from within the CML2.0 product. Hello, I’m Mark Jacob, a Cisco Instructor and Network Instructor at Interface Technical Training. I’ve been using … Continue reading A Simple Introduction to Cisco CML2

Creating Dynamic DNS in Network Environments

0 638 1

This content is from our CompTIA Network + Video Certification Training Course. Start training today! In this video, CompTIA Network + instructor Rick Trader teaches how to create Dynamic DNS zones in Network Environments. Video Transcription: Now that we’ve installed DNS, we’ve created our DNS zones, the next step is now, how do we produce those … Continue reading Creating Dynamic DNS in Network Environments

Cable Testers and How to Use them in Network Environments

0 724 1

This content is from our CompTIA Network + Video Certification Training Course. Start training today! In this video, CompTIA Network + instructor Rick Trader demonstrates how to use cable testers in network environments. Let’s look at some tools that we can use to test our different cables in our environment. Cable Testers Properly Wired Connectivity … Continue reading Cable Testers and How to Use them in Network Environments

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.