Ember Octane Fundamentals

Handlebars if Helper

Ember Octane Fundamentals

Check out a free preview of the full Ember Octane Fundamentals course

The "Handlebars if Helper" Lesson is part of the full, Ember Octane Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Mike makes use of the handlebars if helper to disable the login message if submit is disabled, and also adds conditional CSS so the submit button reflects whether form submission can occur.


Transcript from the "Handlebars if Helper" Lesson

>> Mike North: We last ended up creating a piece of derived state called isDisabled. And when no user is selected, isDisabled is true. So we're gonna do a couple things with that. First of all, I don't think I should be showing logging in as userId, nothing. I don't think this message should appear at all if the form's currently disabled.

This text should only pop up if you've picked a user. So we're going to use the handlebars if helper and here is the syntax. So you'll notice that we have a hashtag to open the if, and a slash to close the if. And this is the typical syntax you'll see for any kind of helper that where you're passing it a chunk of template.

And in this case, it's that bit there. So now if we save this, let's see if is disabled. Sorry, if it's enabled, so I could do this. I had my condition reversed. So let's select a user, great, great, and back to nothing selected. Looks good to me, here’s another thing we can do.

We can go to this input and I’m just going to create a new line here. I’m going to disable the button so it’s not clickable in the event that the form isDisabled is true.
>> Mike North: So what we should see is this is not a clickable button if we inspect it.

There's our disabled attribute there. And if we pick a user, you should see on the button that little disabled text should flash and disappear. There it is, no more, and this is now a clickable button. Great, and we should show some visual indication of this, right? Grey button kind of means disabled.

So I'm gonna conditionally apply some CSS here. I'm gonna delete this bg grey, or cut it rather, so that I can use it later. And I'll say, this is another use of the if helper. But it's sort of the inline form where we don't have an open or close.

If this is disabled, apply that class, otherwise apply bg-teal-dark. Think of this like a ternary operator, right, like a question mark, colon, we've all used this before. So now let's see how this looks. Pick a user, that looks like an enabled button. That looks disabled, there we go.

So we've created a little piece of derived state, and we have a tracked property so that everything updates accordingly. And we have a more interesting form here.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now