Build a Notes App with Alpine.js
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
04. Setting the current note

Episodes

0%
Your progress
  • Total: 55m
  • Played: 0m
  • Remaining: 55m
Join or sign in to track your progress

Transcript

00:00
Whenever we create a new note we want that to appear in this right-hand editor. At the moment we have created a new note when we don't have any notes inside of the data we're storing but we're not setting it as a current note which means we can't bind this using
00:17
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
00:38
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
01:01
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
01:26
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
01:50
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
02:15
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
02:38
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.
03:03
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
03:29
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
03:54
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
04:14
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
04:35
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
05:00
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
05:22
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.

Episode summary

In this episode, we're making sure that whenever we create a new note, it becomes the one that's open and editable in the right-hand editor. Right now, when our app loads for the first time and a new note is created, it's not set as "the current note," which means our fields can't edit it yet. So, our main focus here is to properly set and identify the current note when the page loads.

We start by adding a currentNoteId to our data, which will either be null (if nothing is loaded) or set to the id of the note we're currently working on. Every time we make a new note, we make sure currentNoteId updates to match that note's id.

To actually access the current note, we create a handy JavaScript getter that finds and returns the note object matching currentNoteId. With that, we can bind our input fields (like the title and body) directly to this note using Alpine's x-model, making editing seamless. We show how a change here is instantly reflected in the underlying object.

We also fix a little hiccup with Alpine components, making sure the input fields are correctly wrapped so the reactivity works as expected. Finally, we talk about preparing for the future where we'll support storing and picking up previous notes (from local storage), especially wanting to load the last-edited note by default.

So by the end of this episode, we have a solid setup for selecting the current note and keeping our UI in sync with the data—an important foundation for building the rest of the app's note editing features!

Episode discussion

No comments, yet. Be the first!