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

Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training

Videos You May Like

How to use AWS CloudFormation templates to automate solutions inside Amazon AWS

0 380 0

  In the AWS Class here at Interface, we actually build fully automated solutions with AWS CloudFormations. Here’s an overview of using AWS templates using CloudFormation. CloudFormation is basically an “infrastructure-as-code tool” where you can go into a declarative document and define all the resources that you want and feed the document into the CloudFormation … Continue reading How to use AWS CloudFormation templates to automate solutions inside Amazon AWS

Agile Methodology in Project Management

0 187 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

Creating Lists and Libraries in SharePoint

0 1433 4

In this SharePoint training video, we’re going to cover creating Lists and Libraries. Wherever you create your List or Library, wherever you want to create it, you want to be there. You want to be in a particular Site that’s in a Site Collection. If I wanted to add a List or Library to this … Continue reading Creating Lists and Libraries in SharePoint

Write a Comment

See what people are saying...

    Share your thoughts...

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