1 00:00:02,020 --> 00:00:04,640 So view is doing a lot of work for us, 2 00:00:04,640 --> 00:00:06,450 as we can see already. 3 00:00:06,450 --> 00:00:08,750 Now we've got these two buttons edit and delete, 4 00:00:08,750 --> 00:00:11,270 which are not doing anything yet. 5 00:00:11,270 --> 00:00:13,830 And that is of course, something I want to change. 6 00:00:13,830 --> 00:00:16,420 And let's start with editing. Now, 7 00:00:16,420 --> 00:00:18,910 the goal is, that when we click this button, 8 00:00:18,910 --> 00:00:23,180 we load the correct to do text into this input in the form. 9 00:00:23,180 --> 00:00:25,370 And when the form is then submitted thereafter, 10 00:00:25,370 --> 00:00:28,793 this to do is updated with the newly entered data. 11 00:00:30,410 --> 00:00:33,300 Now to implement this in app.JS, 12 00:00:33,300 --> 00:00:35,150 I'll add a new piece of data 13 00:00:35,150 --> 00:00:37,860 in my returned data object here. 14 00:00:37,860 --> 00:00:39,790 And that's the editedTodoID. 15 00:00:42,610 --> 00:00:44,670 Which initially let's say is null. 16 00:00:44,670 --> 00:00:47,373 Because initially we are not editing any todo. 17 00:00:48,980 --> 00:00:53,160 The goal is to set this as soon as we start editing. 18 00:00:53,160 --> 00:00:57,120 So kind of similar to what we did with just Java script. 19 00:00:57,120 --> 00:01:00,469 When we started editing idea (indistinct) 20 00:01:00,469 --> 00:01:02,610 also stored some element in this case, 21 00:01:02,610 --> 00:01:06,910 in some global variable. Now I want to store the id of, 22 00:01:06,910 --> 00:01:09,750 todo, and not in a global variable, 23 00:01:09,750 --> 00:01:13,300 but in a view managed data property. 24 00:01:13,300 --> 00:01:16,890 But, still kind of comparable. Now for this, 25 00:01:16,890 --> 00:01:21,170 I'll add a new method which could be named startEditTodo. 26 00:01:25,349 --> 00:01:28,968 Or, anything like this. And here, I want to set 27 00:01:28,968 --> 00:01:30,468 this.editedToDoId. 28 00:01:32,110 --> 00:01:36,863 So this data property I want to set this equal to something. 29 00:01:37,820 --> 00:01:42,660 But, equal to what? Well, it would be most convenient, 30 00:01:42,660 --> 00:01:47,660 if this startEditToDo method, however, it may be invoked. 31 00:01:48,430 --> 00:01:52,090 Would get the ToDoId as a parameter value. 32 00:01:52,090 --> 00:01:54,850 So that we can just set it like this. 33 00:01:54,850 --> 00:01:57,130 This would be very convenient. 34 00:01:57,130 --> 00:02:00,810 Thankfully view is very convenient. 35 00:02:00,810 --> 00:02:05,310 What we can do with view is we can go back to the HTML file 36 00:02:05,310 --> 00:02:09,789 and declaratively configure how this startEditToDo 37 00:02:09,789 --> 00:02:13,800 method should be invoked when a certain event occurs. 38 00:02:13,800 --> 00:02:16,980 And specifically we can make it clear that we want the this 39 00:02:16,980 --> 00:02:21,760 Id. For this back here. On this button, 40 00:02:21,760 --> 00:02:24,980 which of course will be replicated multiple times. 41 00:02:24,980 --> 00:02:28,490 Once for every list item. But that's no problem. 42 00:02:28,490 --> 00:02:32,430 We can add another event listener. Again with at. 43 00:02:32,430 --> 00:02:35,410 And then in this case, not submit, but click. 44 00:02:35,410 --> 00:02:38,010 So the name of the event to which we want to listen. 45 00:02:39,020 --> 00:02:42,460 And then here we point at the method that should be executed 46 00:02:43,310 --> 00:02:45,620 In this case startEditToDo. 47 00:02:47,290 --> 00:02:49,790 Now, before when we added @submit, 48 00:02:49,790 --> 00:02:52,710 I mentioned that we could've also written saveToDo 49 00:02:52,710 --> 00:02:57,670 like this. With parentheses. Now, normally in JavaScript, 50 00:02:57,670 --> 00:03:01,180 it's a difference weather you parentheses or not. 51 00:03:01,180 --> 00:03:05,530 Now in view, when adding event listeners in your HTML code, 52 00:03:05,530 --> 00:03:08,430 there is no difference. In both cases, 53 00:03:08,430 --> 00:03:11,320 the method will not be executed immediately. 54 00:03:11,320 --> 00:03:14,230 But, only when this event occurs. 55 00:03:14,230 --> 00:03:18,010 View gives us these two ways of doing one of the same thing. 56 00:03:18,010 --> 00:03:20,900 Because, since we can add parentheses here now. 57 00:03:20,900 --> 00:03:24,040 We can basically pre-configure this function. 58 00:03:24,040 --> 00:03:27,480 We can tell view that we want to have a certain parameter 59 00:03:27,480 --> 00:03:31,160 value when this function will eventually execute, 60 00:03:31,160 --> 00:03:32,213 in the future. 61 00:03:33,620 --> 00:03:37,050 So, for this here to startEditToDo. I can, for example, 62 00:03:37,050 --> 00:03:42,050 pass todo.id. Todo is still this variable here. 63 00:03:43,170 --> 00:03:45,430 And the this variable is one of our todo's 64 00:03:45,430 --> 00:03:46,800 in the todo list. 65 00:03:46,800 --> 00:03:49,770 And, since we add todo's with an ID field here. 66 00:03:49,770 --> 00:03:53,970 We can access this id here. And therefore, 67 00:03:53,970 --> 00:03:56,650 view will make sure that, when this button is clicked, 68 00:03:56,650 --> 00:04:01,550 startEditToDo will be invoked with the concrete ID of 69 00:04:01,550 --> 00:04:06,020 this todo being passed into this method. Therefore, 70 00:04:06,020 --> 00:04:08,780 we can now expect this todoId here. 71 00:04:08,780 --> 00:04:13,780 And store it in this.editedTodoId. Now, that is step one. 72 00:04:15,860 --> 00:04:19,519 Step two is that I want to, pre-populate my input here, 73 00:04:19,519 --> 00:04:23,053 with the text of that, todo. Which, we are editing. 74 00:04:24,090 --> 00:04:27,170 Now, since we have two way binding on that input, 75 00:04:27,170 --> 00:04:29,890 and you'll learn that thanks to two way binding, 76 00:04:29,890 --> 00:04:33,490 changes on enteredTodoText will be reflected back 77 00:04:33,490 --> 00:04:34,900 into the input. 78 00:04:34,900 --> 00:04:38,247 All we have to do is update enteredTodoText. 79 00:04:39,600 --> 00:04:43,070 So therefore now here, I'll set this enteredTodoText 80 00:04:43,070 --> 00:04:45,933 equal to. And now I wanna get the text off the, 81 00:04:45,933 --> 00:04:49,790 todo which we are editing. And for this, 82 00:04:49,790 --> 00:04:52,707 we can find that todo by using this.todos 83 00:04:52,707 --> 00:04:57,670 So our array of todos, and then the find method there. 84 00:04:57,670 --> 00:04:59,410 Find is a built in method which, 85 00:04:59,410 --> 00:05:02,300 you can call on any JavaScript array. 86 00:05:02,300 --> 00:05:04,270 And it allows you to pass a function, 87 00:05:04,270 --> 00:05:09,270 to find. Which will be executed for every item in this array 88 00:05:09,650 --> 00:05:11,770 And, if this function returns true, 89 00:05:11,770 --> 00:05:13,560 it's the item you were looking for. 90 00:05:13,560 --> 00:05:16,640 And it will be returned by this overall method. 91 00:05:16,640 --> 00:05:19,633 If you return false, it will continue looking for an item. 92 00:05:20,760 --> 00:05:24,700 So here we have an individual todoItem. Because again, 93 00:05:24,700 --> 00:05:27,893 this will execute for all the items in this.todos array. 94 00:05:28,820 --> 00:05:32,750 And in this anonymous function, I wanna return true. 95 00:05:32,750 --> 00:05:37,750 If todoItem.id is equal to, todoId. 96 00:05:40,700 --> 00:05:42,630 So I'm going through all the, todo's. 97 00:05:42,630 --> 00:05:44,970 I have a look at the id's of them all. 98 00:05:44,970 --> 00:05:48,483 And if I have an item where it's Id is equal to the, 99 00:05:48,483 --> 00:05:52,410 todoId, I got here, I know that's the item we want to update 100 00:05:52,410 --> 00:05:54,900 So, then I returned true. Therefore, 101 00:05:54,900 --> 00:05:57,150 that item will be returned by find. 102 00:05:57,150 --> 00:05:59,103 It will be stored here in todo. 103 00:05:59,103 --> 00:06:01,450 And here in enteredToDoText, I can now output todo.text 104 00:06:04,286 --> 00:06:07,423 So the text, which is currently stored for that todo. 105 00:06:08,690 --> 00:06:12,010 With that, if we, again, save everything. 106 00:06:12,010 --> 00:06:15,800 If I add a new todo and they then click on edit. 107 00:06:15,800 --> 00:06:18,450 You'll see, that is loaded into the input field here. 108 00:06:19,660 --> 00:06:21,580 Now, currently, if we change that, 109 00:06:21,580 --> 00:06:23,550 we still add a new todo then. 110 00:06:23,550 --> 00:06:25,410 That's of course, not the goal. 111 00:06:25,410 --> 00:06:28,570 So the second step is that we now need to handle the form 112 00:06:28,570 --> 00:06:32,157 submission differently. If we are editing a todo. 113 00:06:33,430 --> 00:06:34,910 For this, we can use a trick, 114 00:06:34,910 --> 00:06:39,210 which we used in our backend code. In our models, a lot. 115 00:06:39,210 --> 00:06:43,360 In saveTodo. Which, is executed when the form is submitted. 116 00:06:43,360 --> 00:06:48,360 We can basically check if this.editedTodoId is truthy. 117 00:06:49,720 --> 00:06:52,700 So, if it's not null. But some other value. 118 00:06:52,700 --> 00:06:55,120 In which case we know that we do have an Id, 119 00:06:55,120 --> 00:06:57,623 which means we are updating a todo. 120 00:06:59,260 --> 00:07:02,630 Else, if it's falsey, if it is for example, null. 121 00:07:02,630 --> 00:07:05,330 We know we don't have an editedTodoId 122 00:07:05,330 --> 00:07:08,713 And therefore we are not editing. But, creating instead. 123 00:07:10,150 --> 00:07:13,460 So this code for pushing a new todo. 124 00:07:13,460 --> 00:07:16,590 Will go into this else branch. 125 00:07:16,590 --> 00:07:19,200 Resetting the form is something I always wanna do. 126 00:07:19,200 --> 00:07:21,293 So, I'll keep that out of if, else. 127 00:07:22,220 --> 00:07:24,150 In the updating case, instead. 128 00:07:24,150 --> 00:07:27,488 I wanna find a todo and update it. 129 00:07:27,488 --> 00:07:31,846 And what we can do here is we can get a, todoIndex. 130 00:07:31,846 --> 00:07:35,150 So the index of the todo item, in the todos array. 131 00:07:35,150 --> 00:07:37,037 By using this.todos.findIndex, 132 00:07:38,700 --> 00:07:41,820 Which works like find, but doesn't return the item itself. 133 00:07:41,820 --> 00:07:44,710 But instead the index of that item. 134 00:07:44,710 --> 00:07:49,360 And then here I get my todoItem and I, again, 135 00:07:49,360 --> 00:07:52,720 wanna return true just as before. 136 00:07:52,720 --> 00:07:55,740 If the todoItem for which this function executes, 137 00:07:55,740 --> 00:07:56,790 has the editedTodoId. 138 00:08:01,520 --> 00:08:03,620 And then now that I got the index, 139 00:08:03,620 --> 00:08:06,127 I can create an updatedTodoItem, 140 00:08:07,222 --> 00:08:12,222 which is a new object. Where I will set the id equal to, 141 00:08:12,630 --> 00:08:17,433 this.todos. For this.todoIndex, which we identified. 142 00:08:18,290 --> 00:08:20,250 Which will give us the existing todo which, 143 00:08:20,250 --> 00:08:23,160 I do want to update. And there I access the Id. 144 00:08:23,160 --> 00:08:25,313 Because, I wanna keep that existing id. 145 00:08:26,410 --> 00:08:29,290 But in my updated new todoItem object, 146 00:08:29,290 --> 00:08:34,034 I can then set the text equal to this.enteredTodoText. 147 00:08:34,034 --> 00:08:36,424 So that we be keep the old id. But we set a new 148 00:08:36,424 --> 00:08:40,440 enteredTodoText. And I'm doing it like this. 149 00:08:40,440 --> 00:08:43,520 So that I create a brand new object in memory, 150 00:08:43,520 --> 00:08:47,270 which ensures that view will definitely pick up this change. 151 00:08:47,270 --> 00:08:50,270 As soon as we replace the existing todoItem 152 00:08:50,270 --> 00:08:54,730 with this new one. Because, now here I can reach out to 153 00:08:54,730 --> 00:08:58,453 this.todos. For the identified todoIndex. 154 00:08:59,800 --> 00:09:02,580 And override the item, which has currently stored 155 00:09:02,580 --> 00:09:05,783 for that index. With my updated, to do item. 156 00:09:06,750 --> 00:09:09,650 With that it will keep its position in the array, 157 00:09:09,650 --> 00:09:12,873 but I will replace it with a new todo item. 158 00:09:14,080 --> 00:09:17,686 With that done. We are creating this updatedTodo, 159 00:09:17,686 --> 00:09:20,654 and we are replacing the old todo, 160 00:09:20,654 --> 00:09:25,654 for that Id that we want to edit with that new updated todo. 161 00:09:25,920 --> 00:09:29,040 And therefore, again, view should do the rest for us. 162 00:09:29,040 --> 00:09:32,660 It should update the dom appropriately for us. 163 00:09:32,660 --> 00:09:34,260 Before we can test this though, 164 00:09:34,260 --> 00:09:35,940 there's just one little gotcha. 165 00:09:35,940 --> 00:09:38,020 Which, this approach would have. 166 00:09:38,020 --> 00:09:40,390 I did mention that view will set this, 167 00:09:40,390 --> 00:09:45,390 this keyword magically to this data object here for us. 168 00:09:46,180 --> 00:09:49,100 It does that. But if you are using this, 169 00:09:49,100 --> 00:09:52,110 this keyword inside of another function, 170 00:09:52,110 --> 00:09:54,580 which you use inside of one of these methods. 171 00:09:54,580 --> 00:09:56,610 Like here in this anonymous function, 172 00:09:56,610 --> 00:10:00,110 then this does not refer to the data object. 173 00:10:00,110 --> 00:10:03,410 View will not be able to remap it in this case. 174 00:10:03,410 --> 00:10:06,120 So therefore here you want to use a simple trick 175 00:10:06,120 --> 00:10:10,687 And get the todoId, with this.editedTodoId. 176 00:10:12,340 --> 00:10:16,410 like this, outside of this function here. 177 00:10:16,410 --> 00:10:20,620 And then you can use to do Id in there. 178 00:10:20,620 --> 00:10:23,190 So this constant, which I created here. 179 00:10:23,190 --> 00:10:26,080 So we just need to create it before we enter this function 180 00:10:26,080 --> 00:10:30,520 so that this still does point at the data object. 181 00:10:30,520 --> 00:10:31,960 And then instead of this function, 182 00:10:31,960 --> 00:10:34,470 We're not using this anymore. But, todoId. 183 00:10:34,470 --> 00:10:37,603 Which stores this id. And hence it will work. 184 00:10:38,700 --> 00:10:41,780 By the way. One other thing I wanna do once we are done, 185 00:10:41,780 --> 00:10:44,170 editing a todo and updating a todo. 186 00:10:44,170 --> 00:10:48,140 I want to set this editedTodoId back to null. 187 00:10:48,140 --> 00:10:51,550 So that the next time we enter anything into the input, 188 00:10:51,550 --> 00:10:54,410 we are not editing an existing to do anymore, 189 00:10:54,410 --> 00:10:56,973 but instead of we'll create a new todo again. 190 00:10:58,900 --> 00:11:01,930 But, with all of that, if we save this code. 191 00:11:01,930 --> 00:11:06,340 If I add a new todo. And then maybe or the second todo 192 00:11:07,480 --> 00:11:09,870 and I then click on edit on a new todo and 193 00:11:09,870 --> 00:11:12,070 add a couple of exclamation marks. 194 00:11:12,070 --> 00:11:15,300 This updates here. And thereafter. 195 00:11:15,300 --> 00:11:17,343 I can again, add new todos.