HTML Attribute and Class Utilities
In this lesson, we'll take a look at a few powerful utilities provided by EdgeJS that make working with attributes and conditional classes a breeze.
- Author
- Tom Gobich
- Published
- Feb 10
- Duration
- 6m 9s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
HTML Attribute and Class Utilities
-
[music]
-
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.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!