Check out a free preview of the full Ember 2.x course:
The "Handlebars Helpers" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Handlebars Helpers are another way of extending what you can do in a template. They can be bound to data if need be and are useful for scenarios where you don’t want to add any additional DOM elements.

Get Unlimited Access Now

Transcript from the "Handlebars Helpers" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Mike: You've already been using a lot of helpers today. Link-to is a handlebars helper that Ember brings to the party. If and each, forms of those exist in Handlebars as a library. We're going to build a new one ourselves. So it's another way of enriching the language that you can use to express user interfaces and templates.

[00:00:32] And they're great for building strings and for really sort of simple stuff. Especially if you don't want a DOM element, you just want some text based on data, or you want a value based on data, reach for a helper. You can optionally bind to data, so that your helper will update as that data changes.

[00:00:58] But typically you don't need to do this, because the nature of what you're building is simple. And if you're using a helper inside a component and then you can often be in a situation where what you're rendering will already be changing as a result of some other higher level binding updating.

[00:01:17] And part of this, part of building helper as well, is not introducing vulnerability to cross-site scripting attacks. And this means that essentially you're spitting out a string that can have HTML markup in it. And you wanna make sure that you're not taking in text and just spitting it out, cuz then people will start passing in script tags instead of numbers and everything will fall apart.

[00:01:50] So Ember.Handlebars.SafeString is the tool to use to kind of sanitize things right before you return them from the helper and they're sent to the DOM. So here's an example of a helper, number-with-units. So you can see in the top right this is the output that I get from the markup on the top left, and the rest of the screen is the implementation of this helper.

[00:02:18] So you can see that what I get as an argument here is a params object, and that's an array of all of the arguments that I receive, so that the in the first position I'm gonna get quantity and then the second position I'm gonna get units. And then I'm in this case using the Ember inflector, which is just really for taking plural words and making them singular and vice versa, so that I can say a number and then pluralize based on that number.

[00:02:53] So this is a great example where I don't really care, this isn't a DOM element I'm building. This is a nice string based on data that I'm building. And it's worth noting that, you see the way that you use a helper, the way that you consume it, in this example, is by just passing arguments.

[00:03:13] And if this is how link-to works, right, where we can just pass we have a first position, a second position, and you kind of understand how that works and you get used to it. You can also have named arguments that will happen after all of your unnamed arguments.

[00:03:29] So after framework, we could have something that's like bold equals true. And all of the named arguments that you pass in will come in through that hash function or argument in helper itself that I've commented out there. So you can actually mix and match. And in fact, as you get as you use link-to with more complex cases, you can add classes to it.

[00:03:59] You can customize it further with options that follow the basic argument that we've been passing to that helper. And [NOISE] I'm not sanitizing in this case. Because I'm not spitting out HTML, the result is. If you return a string without sanitizing it and you've got HTML, you're actually gonna see the markup on the screen itself.

[00:04:29] So it's gonna actually encode everything and you'll see HTML on the screen, which is bad. So this is still safe. This is still totally safe. But the safe way to get markup on the screen is to create a new safe string and return that instead of just a string.