Sign up to access "Build a Notes App with Alpine.js" right now.

models in Alpine to start editing it. The goal of this part is to create that first initial new note assuming that we're landing on this for the first time and that's always going to be the case because we're not putting this into local storage and then having the note here that we can start to edit. So let's go ahead and look at that now. Now to do this what we want to do is keep a kind

of note of the current note id inside of here which by default is going to be null because we're not quite sure what that is at the time when we land on the page. Now whenever we create a new note that's always going to be set to the note id that we have just created. So let's start by just setting the current note id to the id of the note that we've generated. That's why the note

id is so important. We need to have some sort of unique way to identify this. Now how are we going to access the current note? We've got it inside of our note data but we haven't got a kind of getter to grab this out. Well let's go ahead and create a getter here just called current or current note and that's going to return to us the note based on the id that we have. Now to get that we

basically need to look through our data and find a note that matches the current note id. So let's go ahead and return this data. We'll use the find method in javascript and inside of here we get passed in a closure where we can grab the current note or the note within the stack of notes we have in that array and we can find that by the id. So we're going to compare the note id inside of

all of this data to the current note id that we have. This current note id. So what this will return to us is a note object that exists within data by the id that we have stored in current note id. Now we can test this out and let's do this directly inside of this area here where we actually edit a note and let's go ahead and output it to the page. So let's go ahead and say x data

and let's say x text in here. This is going to just output an object but we can dive into it in a little bit more detail. Let's say store and notes and current. So that's the getter for the current note. Now what that should give us is just an object. So that is the newly created note that we get when we land on the page. That's the same one that we have inside of this array

just here. We can prove that by just dumping out the id from the current note and let's go over and give that a refresh and it is there. So let's go over and compare these two that ends in 409. So that is the note that we're after. So what by doing this what we can do is now bind the input here to the title within this current note and the text area to the body in this current note.

So let's get rid of this in here and let's try that out. In fact we could probably keep this. Let's create a couple of spans here with the title and the body. So let's change this over to body and let's go ahead and hook this input up using x model. So we're just going to say store notes current and title and we can do the same thing. So we can effectively just copy this

down to the text area and we can do that for the body as well. So the current note always exists as an object inside of this getter and now we're just binding it to these two things. So now what we'll find is when we start typing we should see if we just give this a hard refresh that doesn't look like it's working so let's just have a look at this and yeah of course that's not

going to work at the moment because we're using x model here and there is no alpine component to house this. So what we could do is get rid of the x data on these two components here and we can say that this entire div that wraps the input text area and delete button is an alpine component. So we're actually going to end up with a few different components on the

page. Let's go over and give that a refresh and we'll just start typing a note title. You can see that that's reflected in the current note and this is the body. So there we go we now have these two things in sync which is really important. So now that we've got them two things in sync we can go ahead and get rid of this. We've now got the current note selected and

hooked up to this input and to this text area. So now technically when I'm editing that I'm actually overwriting the object that we stored inside of here and you can see that that says abcdef and that's pretty much it. So there we go we are getting all of that information inside of there. Now when we think about setting the current note what we need to do down here inside of init

a little bit later on is when we do have notes that have been previously stored in local storage we want to grab the first item out. We're not quite there yet because we have a list of notes but we don't quite know how we're ordering them just yet. The ordering is eventually going to come from the last edited note and really what we want to do is when we fire this up in the browser

we want the last edited note to be loaded into the editor view so we can start to edit it. So at least now we have a reference to the current note that is being edited and we can set that a little bit later but that's pretty much how we go ahead and set the current note id, grab the current note and then go ahead and hook it up to our input and our text area.