Attribute binding examples: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

08. Attribute binding examples

Transcript

00:00

I promised you some practical examples for attribute binding.

00:03

Let's go ahead and cover them now. We're going to start off with an example where we have a list of people represented by checkboxes that we can select and then have each of them people's styling change as we select them

00:16

and then after that we'll go on to look at improving the progress bar we looked at in the last episode. So let's go ahead and just start to build out a component inside of here. We're not quite sure what's going to go in xData at the moment

00:30

but we want to build out a list of people. So let's go ahead and create out a div inside of here and let's have an input inside of here with a type of checkbox and why don't we just kind of get rid of the name and id for now.

00:43

These are going to be for each of the people so I'm going to create a span in here with each of these people's names and that's pretty much what we're going to have. A list of people inside of here.

00:52

Let's go over and just check this out and there we go. That's kind of what we want it to look like but when we select each of these we want the styling of each of the selections to change.

01:01

It's going to be a very simple example but for now it's going to give you a good idea as to how to pull these into your actual applications. Now we've not covered iteration yet

01:11

but let's go ahead and look at sneak peek at how we might iterate through a list of data that we have inside of xData. So let's go ahead and create out a people array

01:20

and inside of here we're going to have an object with an id and a name. So that's exactly what we looked at here. We want to output the name of each of these people. So I'm going to go ahead and pull this down.

01:31

Let's change this to Billy and let's do one more in here as well and let's change that to Mabel and there we go. So we want to iterate through on each of these divs, each of these people and output a checkbox for each person.

01:46

Now to do this we use x4 which as you'd imagine is like a for loop or for each loop. So we can't directly do this on a div. Let's look at the syntax first.

01:56

We'll run it in the browser and see what error we get back. For this we're going to say person in people. So we're iterating through people and for each of them people we're getting back a value person which represents each of these objects.

02:10

Let's go over and give this a refresh and check the console. You can see that we've got an error here. Essentially what we want to do instead of applying x4 to a div we want to apply this to a template element instead.

02:22

So let's go ahead and wrap this entire thing in template and just figure out where we are and let's apply that here instead. Let's go over give that a refresh and there we go. Now we've hard-coded the value Alex at the moment

02:36

but now what we can do is replace this out with the person's name. So in this case we can go ahead and say xText person and name. Let's go over refresh and we have a checkbox for each of these people. Now let's go back to what we did before when when we checked one of these.

02:56

So I'm going to pull this down to a new line just so we can focus on adding these to the inputs. When we go ahead and bind these in we want to say xModel and choose some kind of array of selected people. So let's go ahead and say xModel selected.

03:16

Now of course what we need to do is add a value to this. Now if we think about the way that we've done this we're iterating through these people. We've already looked at an example of binding to an array based on the value of a checkbox but what we can't do here is say person.id for example.

03:34

That's not quite going to work. Now if I go ahead and just click on these you can see first of all the functionality here doesn't quite work but second of all if we were to go ahead and use a span here to output the list of selected values that we have we're going to see something really odd.

03:49

We see person.id so it's the literal value that we've used inside of here. So binding is really important here because what we can now do is say xBindValue and bind it to the actual id from this person object. So notice the difference now when we check this.

04:06

You can see that we actually get the value of each of these people. So although we've already kind of covered this this is a much more dynamic example where we have a predefined list of people perhaps this has come from an API and then we actually iterate through each of these rather than manually building this up.

04:23

Now what we also want to do with each of these inputs is make these unique. At the moment these are non-unique so for example the id in here would be pretty important so we could go ahead and xBind in the id and we could set this to person underscore and then the person's name person.id.

04:43

Make sure we cover this in backticks and there we go. Now if we give this a refresh and just come over here notice that for each of these inputs we've got the id now set to person underscore one the second one person underscore two and so on and so forth.

04:59

So we're just using bind here liberally to build up what we need. So finally let's make sure that when we do select these people we highlight these maybe in bold or give them a color to show that these have been selected. So I'm going to go ahead and get rid of this xText for selected here and let's focus on that now.

05:18

Now I'm going to go ahead and bring back some really rough styling at the top of the page and let's just set font weight to bold here and actually spell weight correctly and let's go down and bind this in now if this has been set or if this particular person has been selected. So again we know that we can use xBind class here and we can bind the bold class in

05:40

if a particular expression comes back as true. That's made them all bold of course because I've just hard-coded true in. Now how are we going to determine this because if we look up here we have a list of people but we also have just a selected array so we can't really just output a really simple expression.

05:58

Well in this case we're just going to say selected and just use include which is just a javascript method on an array and say person.id because we're storing these ids in here that's going to work nicely or will it? Let's go over and have a look. So I'm going to go ahead and check these and notice that the functionality that we've just

06:18

introduced isn't quite working. Now the reason for this is selected is an array of the ids that we've chosen but they are actually arrays of strings. Now the reason for that is because each of these people being output here with the value is a string. This is a string so when we bind it to this array we actually get stringed back. Now there's a couple of ways around this.

06:44

The first way is to cast the number that we are checking here directly within includes in that list of selected strings to a string or we could control how the data gets put into selected which is probably the better option. The first option is to say to string at the end of id and if we check this out now you can see that that now works because we're comparing a string

07:09

with a string but this method is a little bit messy. We are trying to kind of fiddle what we're comparing here so the best way to do this would be to add a modifier to model which are all listed out in the alpine documentation if you need to learn more about these. So what we're going to do is we're going to use the number modifier.

07:29

So what this will do is it will take the string value person id and as it puts it into selected it's going to make sure it's represented as a number. Now we don't need to cast this to a string when we check inside of includes. Let's check out the difference and you can see it still works nicely. Okay let's go over and look at another example and that is the progress bar

07:53

that we kind of looked at in the last part but this time we're going to build out our own styled progress bar. So let's start by just building the structure of this out. This is going to have an overall wrapper with perhaps a progress class and then inside of here we're going to have the inner part of this. So this is the kind of outer part of the progress bar with

08:14

the background and then we're going to have a progress inner and again we're just going to create some really simple styles up here. Let's just do these above here just to keep things really simple but of course feel free to use any kind of ui library that you're using. So for the outer progress let's say that this has a fixed height of 10 pixels and let's give this a fixed

08:36

width just because of the way that we're working on screen and let's give this a background color of just a light gray. Now for the progress inner this is going to have again a height of 10 pixels to match the parent but we're going to have a background color that we want to see represented as the actual progress bar. So let's set this to just slate gray maybe just to make this a little

08:56

bit nicer. So that should give us a nice progress bar but for this we'd want to manually set the style because the style needs to change based on a javascript value. So for example if I set the width of this to 50 pixels let's go over or 50 percent rather let's go over and see what this looks like. There we go there is our simple progress bar. So we now want to bind in the style

09:20

here based on the value that we have inside of x data for our progress. So let's set the progress here to just 50 just to kick things off and let's look at binding this in. So we know we use x bind style and in here we can just take this entire string add it in there and then go ahead and pass in with interpolation the progress that we have. That's going to not change whatsoever. Of course

09:50

we still see that flicker while Alpine loads and applies this but it works as we would expect. Now let's go ahead and just bring this up because we don't need that and let's go ahead and create our button in here to increment this. Now if we were building a progress bar in real life we would probably just have this independent you'd probably have some kind of event which

10:11

dispatches the progress update. We're not quite going to cover that yet but for now let's go ahead and wrap this in a kind of outer div and have that as the Alpine component and then we can just create a button in here just to play around. So let's create a button and when we click on this we're going to go ahead and increment this. So let's set the progress to progress. In fact let's just

10:35

increment it with one and let's say increment and that should do the trick. Let's go over and check it out. So when we increment it sure enough it works and of course we would probably have a starting value of zero. So that works really nicely. You'd probably want to refactor this to some kind of method. So for example you would probably have some kind of increment method in

11:01

here which set the progress internally and incremented that internally and then from here you wouldn't have to actually do the operation like this. You would just call the method and that would handle everything. So just with that refactor that'll work in exactly the same way. So let's just go and fix up the comma on there and there we go. Works in exactly the same way.

11:22

We could even have fun with this and have this increment on its own. So for example we could initialize this component and we haven't looked at that concept yet but essentially what you can do inside of xdata is you use an init method and that's going to go ahead and do something when this component initializes. So let's just console log out init and let's go over and look at our

11:45

console. You can see that init has been called. So just by introducing an init method this is always going to run. So for example what we could do is we could set some kind of timeout or interval in here and for that interval let's say that runs every 500 milliseconds we could call the increment method from within that interval and of course what that's going to do is increment that every

12:12

half a second. Let's speed that up a bit. So let's set this to 100 and there you go. You can see that that progress bar is going all the way along. Now of course this is progressing up to the point where it goes outside of the progress bar so what you'd probably want to do is introduce some kind of max to this. Let's not look at that now because we're going to look at plenty more examples later but

12:36

just as a kind of hint what you might want to do is stop this interval if it does get to 100. So for example you could say let interval equal interval and then inside of here you could check the progress. So you could say if the progress is equal to or greater than or equal to 100 then you want to go ahead and clear that interval out to stop that incrementing anymore. If you wanted it

13:01

to go past 100 this wouldn't be the method that you want to use but again we're not going to get too far into this. Just a basic check inside of there to stop that if it gets to 100. Let's wait for this and see if it works and it's nearly at the end and it should just stop. Now it is not quite right but again you can go ahead and fiddle around with this to make this work how you want.

Episode summary

In this episode, we dive right into some hands-on attribute binding examples, focusing mainly on dynamic lists and progress bars.

First up, we take a practical look at managing a list of people. We start by rendering a list of checkboxes, each representing a different person. As you check and uncheck them, we update the styling so that selected people stand out (like bolding their names). This demonstrates iterating through data with x-for, binding attribute values like id and value, and syncing selected states with an array using x-model. We address a common gotcha with type mismatches (numbers vs. strings in the selected array), showing solutions like using Alpine's number modifier for consistent data.

Next, we revisit and rebuild a styled progress bar from scratch. Using dynamic style bindings, we sync a progress value to the width of the bar, and hook up a button to increment it. We also introduce the Alpine init lifecycle hook to automatically animate the progress bar as soon as the component loads, using setInterval. As a finishing touch, we show how to stop the animation when the progress reaches its maximum.

You'll come away from this episode with a solid foundation in attribute and style binding for real-world UI elements in Alpine.js, and a sense of how to troubleshoot common pitfalls along the way.

Episode discussion

No comments, yet. Be the first!