This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.

Check out a free preview of the full Zero to Production Node.js on Amazon Web Services course:
The "Exercise 6 Solution Part 1" Lesson is part of the full, Zero to Production Node.js on Amazon Web Services course featured in this preview video. Here's what you'd learn in this lesson:

Kevin begins walking through the solution to Exercise 6. He starts by looking at the correct way too implement managing the completed status in the user interface.

Get Unlimited Access Now

Transcript from the "Exercise 6 Solution Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kevin Whinnery: When we sent you off on this Vue.js journey, we had you try to change the application to take advantage of the API that we just put in place last time around to actually save the completed status of the to-do list items. And so we actually do have, looking through, we got one pull request which is great and definitely implements this in a way very similar to what I would recommend.

[00:00:38] So let's actually take a look and blow that up. So, what we have here in this pull request is a couple of changes. The first is to our existing store utility class or a utility object, I guess. So we had some logic before that would actually save every todo in the list, if it was flagged with a Boolean property called modified.

[00:01:09] And this is just kind of a byproduct of the way to do NBC, it was originally implemented where like the only way todo items were saved were as an entire list all at once. So, that's still the way that it works. So what we what we've done here is updated that those AJAX requests to in addition to sending the title to the server, also sending the completed status of a todo item to the server as well.

[00:01:42] We also have that down here in the update. So both in the create and the update steps, we have just also started tracking the completion status of the todo. So, that was step one that we had to do it. Next, we had to modify the user interface to actually like save that property as a part of the as a part of the interface when something was actually completed.

[00:02:11] So what we did here, this is the actual model or the view component. We added another instance function here. Actually, I might just open this file up, so we can see what we did. So there is a section of functions within a view component called methods which are callable as a part of, then handling and other other scenarios.

[00:02:42] So we had before and addTodo, a removeTodo, editTodo, doneEdit and what we added here was a new method call complete which takes a todo that was completed. And the actual property completed of the to do is already being updated, because it was bound to a property of the checkbox object.

[00:03:10] Maybe it would be easier to look at that here in the source for index.ejs. So, here is the for loop in which were rendering all the individual list items. And inside each list item, there is a div that contains the contents of the button, but also this checkbox toggle which was bound to the completed property of the todo model.

[00:03:46] So any time that checkbox is updated, it's actually going to be updating the bullion property completed on the underlying to do list item, so that property is already being updated. So, what we did in this change set here is we take the completed todo. We flag it as having been modified, which is necessary to actually persist the save to the server and then we call that same storage method that we had before passing in the current list of todos.

[00:04:24] And because this todo was marked as modified, we're going to persist that change to the server. So, that was the only thing we needed to change on the actual view instance itself and then the third change in the pull request was also necessary. So we updated our our service, which is the back-end.

[00:04:49] We updated our controller, our component logic. We also updated our HTML here for the actual view and it was reformatted a little bit, which is also good. Get it closer to under 80 columns, which I appreciate. The primary change here was adding a new event listener on this object.

[00:05:18] So whenever the change of the event happens on this checkbox, we're gonna call this complete function on the component passing in the current to do that was that was updated and there's a few ways you could've gone about this. Listening for the change event is great and probably, maybe the cleanest.

[00:05:42] Another way would have been to attach a click handler to this input, as well. So here's our input checkbox, listening for the change of event and calling our function is a great solution. Another thing that you might have done is add a click handler function here and then you could have called that complete function passing in the current todo for this item.

[00:06:13] So that would have been a response to the actual click, but listening for the change of the property is probably the best way to approach that. So, excellent work on that piece. That is precisely what I would have done in this situation. So good work and you did it much better than I would have done, had I live coded it in front of you.

[00:06:42] So, I'm going to go ahead and apply a plus one to that. And since it's a bigger change, I'll pull it down locally and make sure that it's working properly before I merge it in, but it looks absolutely perfect at this point.