Model: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

04. Model

Transcript

00:00

Data binding is probably going to be a really important part of what you use with Alpine. And if you've come from frameworks like Vue, you'll know that there is a vmodel directive which allows you to bind a value to, for example, an input.

00:14

Now let's take a look at this in the context of AlpineJS. It's very similar. So again, let's go ahead and set out some x data here. And let's just set a name value here to an empty string.

00:25

We're going to go ahead and introduce an input type of text. Let's get rid of the name and id for now because they're not important in this case. And let's use x model here. And we're going to hook this up to a piece of data that we're storing inside of x data.

00:38

Now when we type this, nothing is going to happen at the moment because we can't see what's going on behind the scenes. But of course, we already know we can output values. Let's go ahead and use x text to output the value of name.

00:52

So that's going to sit right next to that input. Now let's go ahead and start typing. And you can see that when we fill this in, when we modify in any way, that has a binding between the value of this and the value inside of x data.

01:05

So we're, of course, outputting that inside of there. Now a really interesting thing about this is, of course, this takes in pretty much any kind of expression or any property that you're extracting. So for example, we could get the length of the name as we type it.

01:18

Let's go ahead and do that now. So you can see very, very powerful functionality in here. Let's go ahead and copy this. And let's create a more real world example.

01:27

So usually what you would do is when you have input binding with inputs, this is to submit a form. So if we go ahead and switch over this outer element to a form, what we can effectively do is create a form with the data that we want to submit inside of x data.

01:44

And we can have a Submit button to actually submit this through. Now we're kind of getting ahead of ourselves. But we've already seen how event handling works within view within Alpine. When we clicked, let's just look at this when we submit this form.

01:58

So we've got an input of text in here with that name. No labels or anything like that. But that's absolutely fine for now. Let's go ahead and create a button with the type of Submit.

02:08

And we'll just say Submit. Now let's go over and let's type in our name, hit Submit. Of course, by default, this is going to refresh the entire page. That's not what we want.

02:19

What we can do instead is we can apply an x on. And before we used x on click, but of course, we don't want to do that for a form. Instead, we're going to say x on Submit. Now inside of here, we can do pretty much anything we want.

02:31

So for example, we could say console log and name. Let's go over. Let's enter Alex. Click on this.

02:38

Now you would have seen that kind of flicker down there. But we've still got the issue of this being submitted. So in this case, what we want to do is add something called a modifier to this event. Now within pure JavaScript, when you get an event object in and you're submitting something,

02:56

usually you would use prevent default. Now we don't necessarily want to do that. We could actually do that manually inside of x on Submit. But it's easier to say dot prevent.

03:06

And that's just a modifier that we can handily apply to any of the events that we use within Alpine. So now when I type in Alex and hit Submit, sure enough, we get that value dumped out to the console.

03:17

And when we do do this, what we would probably do is send some kind of AJAX request through to our API to submit this information. Again, we're kind of getting ahead of ourselves. But let's look at how we would do this manually with inside of here.

03:29

What we actually get if we just console log is an event object. Let's just go and send this across. And you'll see it flicker down there. It was a submitted event object.

03:40

So what we can actually do with this is manually prevent the default behavior. You wouldn't actually do this unless you had a very special case. But we could say prevent default. And then we could go ahead and log out the name, for example.

03:54

Let's go over. Let's enter Alex. And there we go. It works in exactly the same way.

03:58

But of course, you don't have to do this every single time. So using dot prevent is much easier. Of course, if you needed access to the event, you now know it's there. So you can go ahead and use anything inside of there that you want.

04:10

And if you wanted to find out what was inside of that, you could just console log the event here and go ahead and check out any of the properties that you can use. Now, we're kind of getting ahead of ourselves, like I said, because this is about models. Let's just switch this back to prevent and console logging out the name.

04:30

And let's move on to something else. I want to quickly talk about the fact that this is two-way data binding. So for example, let's go ahead and bring back this example with a name in here. Let's bring back an input type of text and go ahead and hook that up using x model name.

04:46

And let's output the value of this again. So pretty much exactly what we did before. Let's actually change that to a span and x text and name. So pretty much the same example that we saw before.

04:59

When we type in here, that value gets updated. But what if we update this value? What's going to happen to the value inside of the input? Well, let's go ahead and turn this into something a little bit different.

05:10

So nothing really super useful. But this will demonstrate the concept of the two-way data binding. So what we're going to do is we're going to introduce a button in here. But when we click it, it's going to set the name to, for example, all uppercase characters.

05:24

So for example, we could say uppercase. And let's go and say x on, which we've already seen. Click and then go ahead and call a method. We've not quite looked at this yet.

05:38

But it's just like a standard function within an x data object. So for example, make name uppercase. And then what we could do is we could set. So we have access to this in the context of any of the functions that we introduce inside

05:52

of x data name. And we could reset this to this name and to uppercase. I think that's going to work. Let's go over and try it out.

06:04

So let's say Alex hit that. And yeah, that didn't work, of course, because we're not actually calling this method. Let's go ahead and add that in there now. And let's go over and try this out.

06:12

So uppercase. And there we go. So not only did the value that we actually have stored within data change, but because we have a two-way data binding, when we modify the value within x data, that's also going

06:24

to reflect this inside of the input as well. I can't think of many cases where you'd want to update the value of this and then have that reflected in an input. But it's useful to see this in action.

06:36

So just to recap, we have name, which is being set by whatever is typed into the input. That's what we've already seen. We have x text outputting the name. And then we have an onClick handler inside of here that calls a method that updates the

06:52

original property, which because we have two-way data binding in place, also updates the value of the input as well. So although, like I said, it's not the most exciting example or useful example, that gives you a really good idea as to what's going on behind the scenes.

Episode summary

In this episode, we're diving into one of the most important features of Alpine.js: data binding. If you've ever worked with frameworks like Vue, you'll recognize the familiar pattern of using v-model to bind form input values to your data — Alpine does the same thing with x-model.

We'll start off by setting up a piece of data (like a name property) using x-data, then bind it to a text input using x-model. You'll see in real time how typing into the input updates the internal data, and we'll also output the value next to the input so you can watch it change as you type.

Next, we'll take things a step further by showing how you can derive values from your data (like the length of your name as you type), and how to build a more realistic form that can be submitted. We explore intercepting form submission with Alpine's event modifiers like .prevent, so the page doesn't refresh on submit, and we log out the submitted data — just like you might in a real app.

After that, we dive deeper into two-way data binding by adding a button that, when clicked, updates the name value (like converting it to uppercase), and show how that change is instantly reflected both in the data and the input. This illustrates how any changes you make in the UI or the data stay perfectly in sync.

By the end of this video, you'll have a solid understanding of how to use x-model for flexible and reactive forms in Alpine.js, how event handling works, and the power of two-way data binding. It's everything you need to connect your UI and your data with ease!

Episode discussion

No comments, yet. Be the first!