-
So now in addition to the HTML, Inspect, and text-based helpers that SJS provides, there's a couple of helpers that I find super useful that are new in the latest version of SJS.
-
The first is HTML.classNames. The values that we pass into this particular method are relatively similar to View or Alpine's class signatures.
-
So we can provide an array of strings, but the array can also contain an object of key-value pairs, where the key is the class or classes that we want to provide.
-
And on the right-hand side is some conditional or Boolean value. Anything that's truthy will include the class. Anything falsy will exclude the class.
-
For example, if we jump back to our application, let's say that we want to do something special for the very first movie that we have in our list, but not the others. Let's go ahead and hide our browser back away.
-
Okay, so first with our each loop, we can easily get the index of the current movie that we're on. By wrapping this in an extra set of parentheses, and the second parameter is going to be our index within this loop.
-
Now we can apply our conditional class. So first we'll want to apply the class, do double curly braces so that we can get access to the HTML utility.
-
I'm going to go ahead and break this down into separate lines so it's a little bit more legible as we work with it. And let's call the class names method. Within here we'll provide it an array.
-
And let's say for the very first index of our movies, we want to make the border blue. And then for the rest, we'll just make it a gray. So for this, we'll say maybe we have a padding of four,
-
and then we have a border, and let's try to provide first a ternary. So we'll do index equals zero. And when index does equal zero, we'll do border blue, maybe 500.
-
Otherwise, we'll do border slate, maybe 300. We'll give this a save and we'll see what we have within our browser. And there we go. So our very first index is a bright blue border,
-
and the other two are a gray border. So, so far, class names method is making use of what we have. Alternatively, if we don't want to provide a ternary, we can provide in an object.
-
And we can provide border blue 500 if index equals zero. And then maybe we'll just use the default border that TailwindCSS will apply
-
whenever we specify the border here. So let's go and jump back into our browser here. And voila, we still see the blue here, but these two are still a lighter gray, which is the default border declaration.
-
We can right-click on these just to verify that. Scroll down to inspect. And we can see our first one has a border with a border blue 500, and the other two are just border. This particular helper makes it very convenient
-
when passing stateful information into EdgeJS to conditionally apply classes based on a server variable that you have. For example, if we get rid of our browser here,
-
we can define block level variables directly inside of EdgeJS using @let. Within here, we can provide a variable name.
-
So to stick with our example here, maybe we could do something like is first, and then we could set its value. So index equals zero. Instead of directly doing this conditional check right here,
-
we can now reference is first, give this a save, and it should work the exact same within our browser. So let's open our application back up. And voila, it does.
-
If we had our browser back away, we can mutate variables as well using a different declarator called @assign. So if we give ourselves a little bit of room here, we do @assign.
-
And let's switch our is first to false. So is first equals false. Assign here is specifically used to mutate an existing variable, whereas let will actually declare the variable.
-
Think of let similar to defining a variable in vanilla JavaScript, right? You would do let variable name equals. So this reads very similar to that,
-
whereas assign would just be setting a different value to that let variable without any of the predefined declaration. For example, if we get rid of this line break here,
-
this exact flow in JavaScript might be let is first equal index equal zero. And then we would have an assign. So is first equals false.
-
This is our let signature right up here. And then our assign is this right here. So that's the difference between what we're doing here with let and assign. So we can give this a save. And now none of them should be blue
-
because we've overwritten our is first variable. And indeed, that's exactly what we see. The second helper that is super cool within EdgeJS is relatively similar, except for it's a bit more vague.
-
It's for any direct attributes that we want to apply onto the element. The example that they're giving here is for an input. So we can use the HTML variable and the ATTRS method off of that
-
to provide an object of key value pairs that EdgeJS will then convert into valid HTML attributes as we see right down here.
-
Now, the reason why there's no value on this end input down here is because as they stay right here, the given value of user.name is null. So it will be excluded from the output of HTML.
-
Now, we haven't introduced them yet. We'll get to them in the next lesson. But EdgeJS also has components. And this ATTRS HTML attribute conversion method
-
comes in super handy whenever you're working with components because it allows you to make them just that much more dynamic so you can specify any additional attributes that you need
-
on the outside of the component and pass it into the component so that the component knows to apply it to the elements. And in case you were wondering, yes, this ATTRS method
-
does work with classes as well. So let's dive back into our application here, hide our browser back away, and let's switch this back to how we had it. So we have our isFirst method.
-
Now it'll be set to true for the first index list item that we have. Let's go ahead and copy just the array out of our class names here. And let's get rid of our class altogether. Now we can do double curly braces,
-
HTML.ATTRS provided in an object. And again, I'm going to break this down just so that it becomes a little bit easier to read. And then we can provide in class and paste our value with our array back in,
-
give this a save, and we should see the exact same thing that we saw prior where our first item has a border that's blue and the others are gray. Awesome. So that's working A-OK.
-
In addition to that, now we can also specify additional attributes that we want this list item to have. For example, if you wanted it to have an ID of the movie Slug,
-
we can do ID movie.slug, just like so. Give that a save. Now we can jump back into our browser. Let's give these a right click, go down to inspect.
-
And now we see each of our list items has an ID where the value is the specific movie's Slug value, which is pretty cool. So if you stop for a second and just kind of think about
-
what these two particular methods allow you to do in terms of dynamicness within your HTML with EdgeJS, it's pretty expansive. And you can do quite a number of things with it.
-
And we'll get into that a little bit deeper in the next lesson whenever we start talking about components.
