Creating Handlebars Template Helpers

Home > Blogs > Developer Visual Studio / ASP.NET > Creating Handlebars Template Helpers

Creating Handlebars Template Helpers

Like This Blog 1 Dan Wahlin
Added by February 27, 2013

In a previous post Using Handlebars Templates to Render HTML on the Client I discussed how the Handlebars script can be used to dynamically generate HTML on the client. It provides a simple yet powerful way to convert data retrieved from an Ajax call or created locally into HTML without writing a lot of custom JavaScript. An example of a basic Handlebars template is shown next:

Handlebars provides a way to embed simple logic into a template (unlike 100% logic less template frameworks out there) using built-in "block helpers" like #if and #unless but doesn't provide a way to perform more complex conditional logic directly in a template. Any conditional statements that require custom logic must be defined outside of the template using JavaScript. In this post I'm going to discuss how to create custom Handlebars "helper" functions that can be called from within a template to perform custom functionality and logic.

Creating a Helper Function

Creating a custom helper function that can be called from a template is quite straightforward. Handlebars provides a registerHelper() function that accepts the name of the helper and the function to be invoked when the helper is called. An example of using registerHelper() to define two helpers named getChangeCSSClass and addPlus is shown next:

Each helper accepts one or more parameters (additional parameters can be defined and a helper function can also accept no parameters if appropriate) that are used to return either custom style information or characters such as +. The getChangeCSSClass helper accepts a change parameter which is converted into a float and then used to determine if a Positive or Negative CSS class should be returned. An example of using the GetChangeCSSClass is shown next (you'll find the helper referenced toward the middle of the template):

Looking through the template code you can see that a helper is called by using the standard Handlebars {{ and }} brackets. Inside of the brackets the name of the registered helper is defined along with any parameters that should be passed to the helper function. This is a great approach because it allows the template code and custom conditional logic to be kept separate which simplifies maintenance and also makes the logic more re-useable.

An example of using the getChangeCSSClass and addPlus helpers together in a template is shown next:

Helpers provide an excellent way to add additional logic into Handlebars templates while keeping your template code clean along the way. For additional information on using helpers check out the Handlebars samples at http://handlebarsjs.com.

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 641 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...

    Share your thoughts...

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