Ember 2.0 Function Helpers

Published on Nov 11, 2015

Ember 1.13 revamped the Helper API, making it simpler, more cohesive, and more powerful.

In this episode we show how to create function helpers- helpers that take in data and return stuff that looks good in a template.


Links

Code

The helper goes in helpers/price.js:

import Ember from 'ember';

export function price(params, {price}) {
  return Ember.String.htmlSafe(`<b>$${Ember.Handlebars.Utils.escapeExpression(price)}</b>`);
}

export default Ember.Helper.helper(price);

Using the helper

{{price price=monster.price}}

Transcript

In today’s episode we’re going to be covering the new helper API introduced in Ember 1.13. It will be the helper API you’re going to want to use when you’re working in Ember 2.0 and above. It’s a lot more powerful and there are two parts to it. There’s the regular helper API which we’ll cover in this episode, and then there is the class helper which is even more powerful, and we’ll cover that in this week’s pro-episode.

So our situation today is that we’ve got our Monster Cards that we’ve been using, and now we’ve added a price to each of them. This is what it cost to get those trading cards. But let’s say we didn’t like how this was displayed. We want it the dollar sign ‘$’ instead of just saying ‘dollars’.

So we could go in here and change it. So this changes it but over here it’s still ‘dollars’. If we do it this way, we have to remember every place we displayed this price and change it there. Pretty easy when you have one or two, not so easy when you have more. This is why we need a helper.

So let’s go ahead and generate our helper. Notice that unlike a component, a helper doesn’t have to have a dash. So this is the auto-generated helper. It’s exporting as default Ember.Helper.helper and then it includes the function there. That function takes some params, it can also take some named params, we’ll be working with those later, and then it does stuff with them, and then it will return the return value, in this case just the params. So it’s a pure function. There should be no side effects. It just takes value, outputs a different value, and it should be the same output for the same input every time. The analogy isn’t perfect but I think of them as computed properties for your template.

So the first order of business is to get the price out of the params. The params are just an array of any parameters you give it. We just gave it 1 so we’re going to get parameters zero-indexed, and that’ll be our price. And then we’ll go ahead and add a dollar sign ‘$’ to that and return it. Then we’ll go ahead and use this helper in both of our templates. We’ll go to the monsters template and put that helper there, so we’re sending it 1 param, and then we’re going to go to the monster show template and we’ll put it in there as well. And we can see that both of these, both over here in the list and over here in the show are displaying what we want. They’re using the helper to compute what to display.

So currently we’re passing in the price as an unnamed parameter, but what if we want to pass it in as a named parameter, like this? Well, we can do that. So we go in here and we have the params. We also have the hash. So the params will now be an empty array, but the hash will contain a price, like this. We can also destructure it using ES6.

So here we send in all the keys that we want to get, and there we go. If you don’t understand it, that’s okay. You don’t have to do it that way. You can do it the old way if you want. But as we’ll see, this works as well and it’s much shorter. So then we’ll go ahead and make sure to have that as a named parameter as well, and we’ll see this working, just like before.

So what do we want to do if we want to make this bold? So we could wrap every single price helper with bold, but it’s much easier to do it just within the helper itself. So we wrap it with our bold tags, but there’s going to be a problem. Ember doesn’t know that it’s safe so it goes ahead and doesn’t interpret it as HTML, it just interprets it as text. This is great for protecting you from malicious user strings but not so great when you want to display HTML.

Fortunately there’s a way to fix that. So we can go here and we can return it with Ember.String.htmlSafe. And if we wrap it with this, then it will tell Ember that we believe it’s safe, and so it can display it as HTML. But what if it’s not actually safe? What if a malicious user sets the price such that it messes up the experience of other users? Fortunately, there’s another thing in Ember called Ember.Handlebars.Utils.escapeExpression, so we’re going to escape the expression of just the price, and then we’re going to interpret everything else as safe. You can see that this is still working and we can’t see the security but it’s much better.

So these are the most basic form of helpers that you can use now in Ember 2.0. However there are also class helpers which are more powerful. They let you bring in information from services and use that, so stuff like your current user or stuff you’re getting from an API. We’ll go over that in this week’s pro-episode. I’ll see you then.

Subscribe to our mailing list