Creating Handlebars Template Helpers

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

Posted in Developer Visual Studio / ASP.NET, Web Development | Posted in , , , , , , , , , , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">