Handlebars if Helper

[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.