ember-let

Published on Sep 23, 2016

ember-let is a simple but powerful tool that can make your Handlebars templates far more versatile.


Links

Code

$ ember install ember-let
{{#each session.currentUser.notifications as |notification|}}
    {{let comment=notification.comment}}
    {{comment.author.displayName}} has commented on
    <a href="#" {{action 'visitItem' notification}}>your {{comment.parentType}}</a>.
{{/each

Transcript

Today I’m going to be sharing with you an addon that is simple but fantastic, extremely useful. It could even save you from creating some extraneous components. It’s called ember-let, which it’s just like it sounds like, it allows you to make let statements in your handlebars. The example we’ll be using today is from a blog project, and here we have various notifications for a user.

This is the handlebars file for that page. So notice that we’re looping through the notifications. Then for each notification we display various things, sometimes relying on the notification itself, sometimes... a lot of the time we’re relying on the comment on the notification. It would be great if we were able to say just comment and get rid of that notification before it. That’s where ember-let comes in.

We’ll install it by typing ember install ember-let. Then we’ll put in an ember-let block in here. So there are two forms of this, there’s the block form and the inline form. We’ll do the block form first. So here we’ll let the notification.comment and we’ll use that as just comment. So here’s what you’re putting in and then here’s how we’re going to be able to use it from now on. We’ll go ahead and indent all this and we’ll notice first that even before we change anything, nothing is changed here because you can still refer to notification and get to comment from there. But we can also remove all of this. So these are much easier to read. You can tell right away it’s coming from the comment instead of having to read notification.comment. And of course everything is showing up beautifully.

But there’s another form that I prefer over the block form, and it’s going to look a little bit familiar. So here we go. We’re just going to let comment=notification.comment. That way, we don’t have to indent everything weird and we don’t have to have a closing block. And I’ll show you that everything is still working just as it was before. I don’t know what type of magic they’re using to make this work, but it’s fantastic.

One thing to note is that it’s only after the let component that its effects take place. So here if we remove it to here, we’ll notice that these two things will disappear while this one stays the same. So something is supposed to be here and something is supposed to be here, but they’re gone. But this is still here. So the let needs to be before it’s used.

And also note that we’re in an each loop here and let is actually being run several times. It can do that because of scoping. So it stays within the current scope. So if we go here at the very end and try to do comment.author.displayName, it doesn’t display anything. If the scope was leaking on the other hand, it would display the author of the last item in the loop, but nothing leaks.

There a couple of other nuances that you may want to know about. First is that you can not only put multiple things into a block component, but some of those things can be hashes, not just hashes but any subexpression can go in there. So here for example we’re using the concat helper to form the greeting.

So there we go. There’s how to use ember-let. It is a great addition to your handlebars tool kit, and when combined with all the other great handlebars tools, we’ll be making awesome apps in no time.

Subscribe to our mailing list