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

Agile Methodology in Project Management

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

Windows 10 Basic Desktop and Navigation

0 876 1

This post is from our recent three-part Windows 10 webinar series. You can watch the video replay of the entire Windows 10 webinars at the following links. Windows 10 Features and Navigation Windows instructor Steve Fullmer introduces the navigation and some of the new features associated with Windows 10 including Sysinternals Tools for Windows Client … Continue reading Windows 10 Basic Desktop and Navigation

JavaScript for C# Developers – September 24, 2014

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

Write a Comment

See what people are saying...

    Share your thoughts...

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