Published on Aug 03, 2015
You can put handlebars helpers inside your handlebars helpers. Handlebarception!
Learn how and when to use subexpressions, as well as how to compose them and use them to replace properties on the controller or component.shortDescription
In Episode 23, I showed you this piece of code.
link-to helper, and then it has this argument in parenthesis, and I told you that was a subexpression. Today we’re going to be exploring more about what subexpressions are, and how you can use them and create them on your own.
A subexpression is a handlebars helper that’s used within a mustache, usually another handlebars helper or an ember component. The subexpression it collapses down into a value, and so the result of the subexpression ends up being an argument for outer-expression. So outer-expression takes two arguments, this first argument that’s given directly, and then the result of the subexpression.
So an outer expression, it can be a component, a handlebars helper, or any type of mustache that takes an argument. The subexpression has to be a handlebars helper.
So let’s look at an example.
Here, we’ve created a function and a helper called
es-equal. It takes two arguments and then it returns a boolean depending on whether they’re equal or not. Then we can use it down here, comparing the
hatColor and the string
blue. If we weren’t using handlebars subexpressions, then within the component or controller where this template lives, we would have to create a method called hat is blue, and use that here, in place of the
es-equal. Then if we want to check whether the
hatColor was red, we would have to create a separate method and so on for if we wanted to check whether a coat color was blue.
Here are two other simple examples,
What they do is pretty self-explanatory. And by the way, the reason we have
es as a prepend is because if you want
ember.cli to automatically detect these and use them, you have to have a dash somewhere in the name. And
es is just a prefix we’ve added to ember screencast helpers.
Alright, now let’s see these in action.
So here we’re using both of them in the same handlebars expression. So we’re using
es-not to reverse
isAscending, and then we’re using
es-and to say if is the selected the sort, and it’s not ascending, so not ascending, the result of the
es-not, then we’ll show the highlight up arrow. Otherwise, we will not show the highlight up arrow.
You may have noticed that here we have a subexpression nested in another subexpression, and you may be wondering, how deep can that go. The answer is, as deep as you want. I’m just waiting for someone to recreate Lisp subexpressions.
So that’s the theory. Let’s apply it to an example app. We’ll start by adding the
es-not and the
es-and helpers to our code, just like we showed you before.
We’re going to use them to replace the
upArrowHighlighted property and the
We can see that the
upArrowHighlighted property is true when both
isAscending are true,
so we’re going to use our
es-and subexpression and have as the arguments
downArrowHighlighted is very similar except we only want it to accept if
isAscending is false.
And with those in place, we can now remove these two properties from the component.
So is it a good idea to replace properties that are on the component with nested subexpressions?
In this case, it looks good either way. It saves us a little bit of code to use nested subexpressions but both of them are fairly readable. In some cases like ‘hat is blue’, it’s just silly to have a method on the component, whereas in other cases, the nested subexpressions may become so deep that it’s better to have the logic on the component, rather than having the nested subexpressions.
So in this video we learned about how to create and use subexpressions, how to compose them logically so that we can combine them and replace different methods on the component with them.
In Episode 25, we’ll talk about how to use option hashes in your subexpressions, like this,
and we’ll also talk about some artificial limits that ember places on your handlebars code. I’ll see you then.
- Sorting Tables with SortableMixin
- Sort Arrows (and refactoring into a component)
- highlight selected sort options
- query params
- Handlebars Subexpressions
- Client-side Pagination Part 1-Basics
- Client-side Pagination Part 2-Previous/Next Page Buttons, Change Page Size
- Metaprogramming Magic with arrays and the ember get helper addon
- Dynamic Toggling of Tables
- Rearranging Table Columns
- Handlebars Subexpressions
- Sorting in Ember 2.0 (Replacing SortableMixin)