Introduction to Helpers

Tuning

For our application’s users, it’s tiresome to pay attention to typing band names and song titles so that each word starts with a capital letter. It would be nice if the application made sure that no matter how the names are entered, they’re displayed in this readable way.

In this chapter, we’ll define a template helper that can help us do that.

About helpers

Helpers are functions with various use cases. Some of them control what is shown in the template, others transform data for display or implement conditional logic.

We have used a great number of helpers in our application already, possibly even without being aware of it. if, each, outlet, and fn were all helpers.

You should consider using a helper when you need to derive data for display from some source, but do not need the markup or event handling provided by components. The following table summarizes a few typical use cases for helpers.

Category	Template content	Output
Timestamps	{{ago message.createdAt}}	24 minutes ago
Translation	{{translate “butterfly”}}	papillon
Localizations	{{localize product.price}}	$4.99
Text transformations	{{shout ‘silence’}}	SILENCE!