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

Creating Users and Managing Passwords in Microsoft Office 365

0 635 3

In this Office 365 training video, instructor Spike Xavier demonstrates how to create users and manage passwords in Office 365.   For instructor-led Office 365 training classes, see our course schedulle: Spike Xavier SharePoint Instructor – Interface Technical Training Phoenix, AZ 20347: Enabling and Managing Office 365    

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. Avatar j

    Where would the register helper methods be placed/called ?

Share your thoughts...

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