Transcript from the "Handlebars if Helper" Lesson
[00:00:00]
>> 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.
[00:00:25] 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.
[00:00:56] 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.
[00:01:23] 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.
[00:01:48] 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.
[00:02:09] 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.
[00:02:27] 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.
[00:02:55] 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.