The Amazing Get Helper

Published on Aug 05, 2016

Handlebars is awesome.

Learn how the handlebars get helper can save you lots of code.


Links

Code

{{#each model as |person|}}
  Say hello to {{get person nameType}}.
{{/each}}

Transcript

Hey everyone. I spent a couple of hours preparing these awesome lightning talk slides and then they didn’t record it, so you get it as a screencast. Alright so we’re going to be talking about the get helper and how to use handlebars to be awesome.

So the app that we’re going to be building today is going to be this. We’re going to be pulling data from the server, and then using a select box, customize how we show the name. And so here we’ve got it selecting the full name. We can also select the first name or the last name, and it’s going to change what’s shown. So we’re going to define our model and then pull the data into the route. Then if we want to display the data like this, we can loop through the model and call the first name attribute on each person. And then if we want the full name, we can do the same thing but call the full name attribute.

So so far this has been pretty basic. But what about when we want to give the user some choice? We want to let them choose, first name, last name, or full name. Then... well first, let’s get the selection part out of the way. This is a pretty solved [01:32] problem. We’re using Ember x-select. If you’re not sure of this we have a screencast on doing select boxes in Ember 2.0. So we’ve got our select box working and we’re going to have the nameType, and we’re going to be using nameType in order to decide what to show.

But how exactly are we going to do this? Are we going to do it on a model property? So here we would have the computedName property on the person model. So we might try to define computedName like this, depending on the funHandlebarsController. But there’s a problem. So can you actually inject the funHandlebarsController onto a model? No, you cannot, so it doesn’t work to have it as a model property.

What about as a computedNames array? So here we would just loop over the array and we wouldn’t go to any properties on this array. It’s only the string. And this can work. So we would get the model and we’d map over it and then call get on the person for whatever the current nameType is. And yes, we can do this but it’s a little gross. We may want to try for a more elegant solution. We also lose some of the information, so if we wanted to do anything besides the name, we couldn’t do that.

What about a component? So we would have our say-hello component and we’re feeding it a person and a nameType. And then in the component, we would have a computedName property and it would be defined like this. What about this one? This one... you know, before we had what we’re going to be talking about next, this was the best solution. And it’s still not bad, but we’re creating two extra files just to do this. The solution is going to involve more handlebars, like this guy.

So this is the solution. We just use the get helper. And so this is the same thing as calling person.get and then passing in the current nameType, and that’s all. So the get helper introduced first in the addon and then pulled in to Ember Proper is fantastic and it can save you a lot of code, so this versus this. I know which one I’m going to be choosing. And that’s not the only cool handlebars helper that’s out there. So there’s concat, hash, mut, with, and those are just the ones that are included in Ember Proper. There are lots of helpers, lots of addons that contain helpers, 56 right now. And some of those are of course just one or two helpers, but others are quite large. And for specific situations, each one of these could save you almost as much code as that get helper. So I would encourage you to use more handlebars.

Subscribe to our mailing list