Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,110 --> 00:00:02,620 So in this lecture, 2 2 00:00:02,620 --> 00:00:06,623 we will finish implementing the bookmarking functionality. 3 3 00:00:08,010 --> 00:00:10,860 And remember that basically the only thing 4 4 00:00:10,860 --> 00:00:12,600 that is still missing 5 5 00:00:12,600 --> 00:00:15,703 is that when we bookmark a recipe like this, 6 6 00:00:15,703 --> 00:00:18,810 then we want that recipe to show up here 7 7 00:00:18,810 --> 00:00:20,880 in the bookmarks panel. 8 8 00:00:20,880 --> 00:00:23,200 So right now that is still empty 9 9 00:00:23,200 --> 00:00:26,810 and we only see this friendly message here. 10 10 00:00:26,810 --> 00:00:29,103 And so let's now go fix that. 11 11 00:00:30,410 --> 00:00:34,040 So taking a look at or mark up here, 12 12 00:00:34,040 --> 00:00:39,040 we can see right here, 13 13 00:00:40,000 --> 00:00:41,963 so we can see that in the bookmarks, 14 14 00:00:42,940 --> 00:00:46,653 we will actually have also the preview element. 15 15 00:00:47,770 --> 00:00:49,770 So this one here, 16 16 00:00:49,770 --> 00:00:52,260 so basically a list element 17 17 00:00:52,260 --> 00:00:54,410 with the class of preview in it, 18 18 00:00:54,410 --> 00:00:58,260 just like we had here for the search results. 19 19 00:00:58,260 --> 00:01:01,960 And so this is actually the exact same code. 20 20 00:01:01,960 --> 00:01:05,700 And so now in order to create this bookmarks view, 21 21 00:01:05,700 --> 00:01:08,200 I can actually simply go ahead 22 22 00:01:08,200 --> 00:01:11,783 and copy this one here from the results. 23 23 00:01:13,187 --> 00:01:14,150 Okay. 24 24 00:01:14,150 --> 00:01:15,950 So at least for now, 25 25 00:01:15,950 --> 00:01:18,780 by the end of this video we will then kind 26 26 00:01:18,780 --> 00:01:20,600 of refactor all this, 27 27 00:01:20,600 --> 00:01:22,850 but for now let me simply copy the code here. 28 28 00:01:23,950 --> 00:01:27,820 And here create the bookmarksView.js. 29 29 00:01:33,080 --> 00:01:34,463 And then here of course, 30 30 00:01:35,860 --> 00:01:37,980 it is called BookmarksView. 31 31 00:01:42,600 --> 00:01:43,433 Okay. 32 32 00:01:43,433 --> 00:01:46,720 Then we also need to change the parent element, 33 33 00:01:46,720 --> 00:01:48,420 which in this case will be 34 34 00:01:48,420 --> 00:01:51,913 this unordered list called Bookmarks_List, 35 35 00:01:54,540 --> 00:01:58,399 right here and here. 36 36 00:01:58,399 --> 00:02:03,399 The error message should be no bookmarks yet, 37 37 00:02:06,600 --> 00:02:11,593 find a nice recipe and bookmark it. 38 38 00:02:16,480 --> 00:02:17,430 All right. 39 39 00:02:17,430 --> 00:02:19,360 But the rest of the code here 40 40 00:02:19,360 --> 00:02:21,303 is actually going to be the same. 41 41 00:02:22,280 --> 00:02:23,823 And so let's now go here. 42 42 00:02:24,791 --> 00:02:26,450 This one we can close. 43 43 00:02:26,450 --> 00:02:28,570 That's no good to the controller 44 44 00:02:28,570 --> 00:02:31,230 and include that here. 45 45 00:02:31,230 --> 00:02:33,640 And let's actually do that below this one, 46 46 00:02:33,640 --> 00:02:35,863 just because it is so similar. 47 47 00:02:37,150 --> 00:02:41,000 So results and bookmarks 48 48 00:02:42,840 --> 00:02:45,310 or actually let's do it here at the end, 49 49 00:02:45,310 --> 00:02:49,420 so that results and pagination stay together. 50 50 00:02:49,420 --> 00:02:51,700 And so now all we want to do 51 51 00:02:51,700 --> 00:02:55,760 at least for now is that whenever a new bookmark is added, 52 52 00:02:55,760 --> 00:02:58,230 we want to render the bookmarks view 53 53 00:02:58,230 --> 00:03:00,290 with all the bookmarks. 54 54 00:03:00,290 --> 00:03:02,493 So with the array of bookmarks. 55 55 00:03:03,550 --> 00:03:08,043 So is right here in controlAddBookmarks , 56 56 00:03:11,820 --> 00:03:13,620 delete all these console.logs 57 57 00:03:14,750 --> 00:03:17,080 and as always add some comments. 58 58 00:03:17,080 --> 00:03:22,080 So add or remove a bookmark, 59 59 00:03:22,830 --> 00:03:23,773 then here, 60 60 00:03:27,290 --> 00:03:30,433 update recipe view. 61 61 00:03:32,540 --> 00:03:35,347 And then here actually render to bookmarks. 62 62 00:03:38,170 --> 00:03:42,000 So that is bookmarksView.render 63 63 00:03:42,890 --> 00:03:44,960 and see how beautiful, 64 64 00:03:44,960 --> 00:03:47,240 and now everything comes together 65 65 00:03:47,240 --> 00:03:49,490 or basically fits together. 66 66 00:03:49,490 --> 00:03:51,910 So we always have this render method 67 67 00:03:51,910 --> 00:03:55,550 and we already know that we can call it on all the views. 68 68 00:03:55,550 --> 00:03:58,930 And so that's really nice about having an architecture, 69 69 00:03:58,930 --> 00:04:00,703 a structure like this. 70 70 00:04:01,680 --> 00:04:06,400 So that's going to be model.state.bookmarks. 71 71 00:04:06,400 --> 00:04:08,970 And so this is also the reason why, 72 72 00:04:08,970 --> 00:04:11,660 why in the state we didn't only store 73 73 00:04:11,660 --> 00:04:14,020 the IDs of the bookmarks, 74 74 00:04:14,020 --> 00:04:17,570 but really we stored the entire data about the bookmarks. 75 75 00:04:17,570 --> 00:04:20,520 So that we can nicely display them in this list. 76 76 00:04:20,520 --> 00:04:23,710 So a list that will look exactly like 77 77 00:04:24,970 --> 00:04:26,433 the result list here. 78 78 00:04:27,640 --> 00:04:31,163 So this should now actually already be working. 79 79 00:04:32,730 --> 00:04:35,160 So let's click this one here now, 80 80 00:04:35,160 --> 00:04:36,513 edit as a bookmark. 81 81 00:04:37,380 --> 00:04:39,253 And now when we come here, 82 82 00:04:39,253 --> 00:04:40,943 done there it is. 83 83 00:04:41,780 --> 00:04:42,613 Great. 84 84 00:04:44,470 --> 00:04:46,400 So let's try another one. 85 85 00:04:46,400 --> 00:04:49,203 And or bookmark here is still there. 86 86 00:04:50,150 --> 00:04:52,210 Now, if we add another one, 87 87 00:04:52,210 --> 00:04:53,290 done. 88 88 00:04:53,290 --> 00:04:55,350 Now we have two of them. 89 89 00:04:55,350 --> 00:04:57,890 And you can see that it also already 90 90 00:04:57,890 --> 00:05:01,520 automatically highlights the current recipe. 91 91 00:05:01,520 --> 00:05:03,950 So the one we are currently seeing, 92 92 00:05:03,950 --> 00:05:05,803 so if we now go to this one again. 93 93 00:05:06,750 --> 00:05:09,170 well, 10 the spicy chicken 94 94 00:05:09,170 --> 00:05:13,370 should actually be the selected one here. 95 95 00:05:13,370 --> 00:05:16,223 And so apparently we still have some kind of bug. 96 96 00:05:17,130 --> 00:05:19,280 So basically what we have to do here 97 97 00:05:19,280 --> 00:05:22,000 is that each time that we display a recipe. 98 98 00:05:22,000 --> 00:05:25,140 We should probably update this entire 99 99 00:05:25,140 --> 00:05:26,690 bookmarks panel here. 100 100 00:05:26,690 --> 00:05:30,310 So this view so that it can then basically 101 101 00:05:30,310 --> 00:05:34,840 select or highlight here the current recipe. 102 102 00:05:34,840 --> 00:05:39,840 So let's do that in the control recipe function, 103 103 00:05:40,550 --> 00:05:44,513 and you see that this one here is getting really crowded. 104 104 00:05:45,420 --> 00:05:46,993 So let's do that here. 105 105 00:05:48,510 --> 00:05:53,293 So bookmarksView.update and then again, 106 106 00:05:54,860 --> 00:05:59,853 model.state.bookmarks. 107 107 00:06:02,530 --> 00:06:03,363 Okay. 108 108 00:06:08,640 --> 00:06:10,193 So let's add this one. 109 109 00:06:12,630 --> 00:06:15,270 Okay, that worked nicely. 110 110 00:06:15,270 --> 00:06:19,350 And now this one here became the current one, 111 111 00:06:19,350 --> 00:06:21,370 but now let's go to some other one, 112 112 00:06:21,370 --> 00:06:24,580 which is not any of the bookmarks. 113 113 00:06:24,580 --> 00:06:29,300 And so now none of them you see here is selected. 114 114 00:06:29,300 --> 00:06:30,200 And so of course, 115 115 00:06:30,200 --> 00:06:33,990 that makes sense because while this is not one 116 116 00:06:33,990 --> 00:06:35,170 of the bookmarks. 117 117 00:06:35,170 --> 00:06:37,030 But now if we click here, 118 118 00:06:37,030 --> 00:06:39,643 then this one is of course the selected one. 119 119 00:06:40,890 --> 00:06:42,930 Now we can click here as well. 120 120 00:06:42,930 --> 00:06:44,740 Because again, 121 121 00:06:44,740 --> 00:06:47,060 these elements here are basically just 122 122 00:06:47,060 --> 00:06:49,180 the same as these ones. 123 123 00:06:49,180 --> 00:06:50,210 So when we click here, 124 124 00:06:50,210 --> 00:06:52,600 it loads the corresponding recipe 125 125 00:06:52,600 --> 00:06:53,733 and here are the same. 126 126 00:06:56,170 --> 00:07:00,470 So you see that now we went back to this one 127 127 00:07:00,470 --> 00:07:02,660 and this one got selected correctly. 128 128 00:07:02,660 --> 00:07:05,450 This one got selected correctly as well. 129 129 00:07:05,450 --> 00:07:08,770 And we also got the correct recipe 130 130 00:07:08,770 --> 00:07:11,260 and that's just amazing. 131 131 00:07:11,260 --> 00:07:13,200 So you'll see how easy it is now 132 132 00:07:13,200 --> 00:07:17,200 to integrate a new feature like this bookmark feature. 133 133 00:07:17,200 --> 00:07:20,280 When we already have a very nice architecture 134 134 00:07:20,280 --> 00:07:22,320 and structure in our code. 135 135 00:07:22,320 --> 00:07:26,090 Imagine that we had all of this code here, 136 136 00:07:26,090 --> 00:07:29,160 simply in one huge messy file. 137 137 00:07:29,160 --> 00:07:32,060 Then how difficult would it be to keep track 138 138 00:07:32,060 --> 00:07:35,340 of all the data and of how these different 139 139 00:07:35,340 --> 00:07:38,800 functions all interact with one another. 140 140 00:07:38,800 --> 00:07:42,350 Now, just to finish we need to fix the fact 141 141 00:07:42,350 --> 00:07:45,893 that these two views here are essentially the same. 142 142 00:07:46,730 --> 00:07:49,390 So at least the markup that they generate 143 143 00:07:49,390 --> 00:07:51,850 is in fact exactly the same. 144 144 00:07:51,850 --> 00:07:55,690 And so that is of course not good. 145 145 00:07:55,690 --> 00:07:58,790 So what I will do now is to basically implement 146 146 00:07:58,790 --> 00:08:01,750 a view that is kind of a parent view 147 147 00:08:01,750 --> 00:08:04,040 of these two views, 148 148 00:08:04,040 --> 00:08:07,113 and that will be called the previewView. 149 149 00:08:08,010 --> 00:08:10,843 So because this element here is called preview. 150 150 00:08:11,770 --> 00:08:16,770 And so then that can contain all of these methods here. 151 151 00:08:16,850 --> 00:08:20,360 And then in the generate markup of these two, 152 152 00:08:20,360 --> 00:08:22,483 we will then use those two. 153 153 00:08:23,460 --> 00:08:25,650 So but instead of explaining it, 154 154 00:08:25,650 --> 00:08:27,750 let me actually show it. 155 155 00:08:27,750 --> 00:08:32,750 So that's a previewView.js. 156 156 00:08:35,050 --> 00:08:38,933 And now let me get all of this here. 157 157 00:08:42,870 --> 00:08:43,703 All right. 158 158 00:08:45,070 --> 00:08:47,633 So this will now be called PreviewView. 159 159 00:08:51,030 --> 00:08:52,650 And what this view will do 160 160 00:08:52,650 --> 00:08:54,530 is to basically only generate 161 161 00:08:54,530 --> 00:08:57,113 one preview element like this here. 162 162 00:08:58,440 --> 00:08:59,980 All right. 163 163 00:08:59,980 --> 00:09:02,980 So this one will not have any message. 164 164 00:09:02,980 --> 00:09:05,180 It will not have an error message. 165 165 00:09:05,180 --> 00:09:08,363 And the parent element is also not important. 166 166 00:09:09,350 --> 00:09:11,450 So just follow me here for now. 167 167 00:09:11,450 --> 00:09:14,020 And I will explain why that is. 168 168 00:09:14,020 --> 00:09:16,653 So here I will simply select everything. 169 169 00:09:17,650 --> 00:09:21,173 Or in fact I could simply set this here to an empty string. 170 170 00:09:22,290 --> 00:09:25,190 So we don't need any parent element here. 171 171 00:09:25,190 --> 00:09:30,040 And actually this year is only the generate markup 172 172 00:09:31,450 --> 00:09:33,313 and here we don't need any of this. 173 173 00:09:35,880 --> 00:09:36,920 Okay. 174 174 00:09:36,920 --> 00:09:37,910 So again, 175 175 00:09:37,910 --> 00:09:41,770 this preview view will only generate the markup 176 176 00:09:41,770 --> 00:09:44,423 for one of these preview elements. 177 177 00:09:45,820 --> 00:09:46,653 All right. 178 178 00:09:48,100 --> 00:09:50,800 So now let's come here to the bookmarksView 179 179 00:09:50,800 --> 00:09:55,333 and get rid of this method here, 180 180 00:09:56,500 --> 00:09:59,420 so that we don't need anymore. 181 181 00:09:59,420 --> 00:10:01,283 And now here comes the magic. 182 182 00:10:02,460 --> 00:10:04,200 So as I mentioned before, 183 183 00:10:04,200 --> 00:10:08,040 we will use the previewView kind of as a child view 184 184 00:10:08,040 --> 00:10:11,900 of the bookmarksView and of the resultsView. 185 185 00:10:11,900 --> 00:10:14,423 So let's import the previewView here. 186 186 00:10:16,890 --> 00:10:18,940 So import previewView 187 187 00:10:23,460 --> 00:10:28,240 from .js 188 188 00:10:29,410 --> 00:10:32,890 and now what we will do here 189 189 00:10:32,890 --> 00:10:35,970 is to still loop over this.data, 190 190 00:10:35,970 --> 00:10:38,660 which is still all of the bookmarks. 191 191 00:10:38,660 --> 00:10:40,640 But now what we want to do here 192 192 00:10:40,640 --> 00:10:44,423 is to call basically this generate markup. 193 193 00:10:45,870 --> 00:10:48,340 However, that would not really work. 194 194 00:10:48,340 --> 00:10:51,763 And so what we really want is this. 195 195 00:10:52,610 --> 00:10:54,603 So result, 196 196 00:10:56,600 --> 00:10:57,930 and then for each of them, 197 197 00:10:57,930 --> 00:11:02,640 we want preview.render, 198 198 00:11:02,640 --> 00:11:03,473 actually. 199 199 00:11:04,440 --> 00:11:06,770 So with the result, 200 200 00:11:06,770 --> 00:11:09,360 but actually that is not all yet 201 201 00:11:09,360 --> 00:11:12,070 because like this wouldn't work. 202 202 00:11:12,070 --> 00:11:15,923 But let's quickly analyze what is going to happen here. 203 203 00:11:16,900 --> 00:11:19,500 So these three here, 204 204 00:11:19,500 --> 00:11:23,640 so as the render method on bookmarksView is called, 205 205 00:11:23,640 --> 00:11:27,040 so this render method, 206 206 00:11:27,040 --> 00:11:29,760 it will set the data on the bookmarksView 207 207 00:11:29,760 --> 00:11:32,150 and then it will generate the markup. 208 208 00:11:32,150 --> 00:11:36,680 So it will call this method here. 209 209 00:11:36,680 --> 00:11:39,840 And so this gets access to this.data, 210 210 00:11:39,840 --> 00:11:42,600 and then we map over that data. 211 211 00:11:42,600 --> 00:11:45,170 And so for each of the results, 212 212 00:11:45,170 --> 00:11:49,690 or let's actually call it bookmarks here. 213 213 00:11:49,690 --> 00:11:51,590 So bookmark. 214 214 00:11:51,590 --> 00:11:53,463 So for each of this bookmark, 215 215 00:11:54,570 --> 00:11:55,993 so not the boom mark. 216 216 00:11:57,010 --> 00:11:58,830 So for each of the bookmarks, 217 217 00:11:58,830 --> 00:12:02,280 we want to then render a preview. 218 218 00:12:02,280 --> 00:12:06,610 However, here we actually need to return a string. 219 219 00:12:06,610 --> 00:12:09,040 So all of this should be a string 220 220 00:12:09,040 --> 00:12:12,540 that we need to return from the generate markup method. 221 221 00:12:12,540 --> 00:12:14,193 So that then in the view, 222 222 00:12:15,070 --> 00:12:18,340 it can insert that markup into the dam. 223 223 00:12:18,340 --> 00:12:19,940 Right. 224 224 00:12:19,940 --> 00:12:22,210 However, by having render here, 225 225 00:12:22,210 --> 00:12:27,170 preview.js itself we'll try to render some markup. 226 226 00:12:27,170 --> 00:12:29,990 And so that is not really going to work. 227 227 00:12:29,990 --> 00:12:32,610 And so what we will do is to change 228 228 00:12:32,610 --> 00:12:34,500 or render method here 229 229 00:12:34,500 --> 00:12:36,593 and add a second parameter to it. 230 230 00:12:37,430 --> 00:12:40,623 So here we will add a parameter called render, 231 231 00:12:41,620 --> 00:12:44,183 which by default will be set to true. 232 232 00:12:45,840 --> 00:12:49,390 So then all of this here stays the same, 233 233 00:12:49,390 --> 00:12:51,943 but if render is false, 234 234 00:12:53,610 --> 00:12:56,853 which is what we will set it to in a minute. 235 235 00:12:57,760 --> 00:12:59,460 So if render is false, 236 236 00:12:59,460 --> 00:13:01,590 then we actually want to return 237 237 00:13:02,530 --> 00:13:05,483 this markup that was just generated. 238 238 00:13:06,400 --> 00:13:09,650 Now, why don't we simply call generate markup 239 239 00:13:09,650 --> 00:13:13,823 itself without messing with the whole render method. 240 240 00:13:15,090 --> 00:13:16,190 So here, 241 241 00:13:16,190 --> 00:13:21,170 why don't we simply call previewView.generate markup? 242 242 00:13:21,170 --> 00:13:23,870 Well, that's because we still 243 243 00:13:23,870 --> 00:13:26,710 need it to set the data property 244 244 00:13:26,710 --> 00:13:29,240 to the data that we passed in. 245 245 00:13:29,240 --> 00:13:32,730 So that then here in the previewView, 246 246 00:13:32,730 --> 00:13:35,210 we can use this keyword. 247 247 00:13:35,210 --> 00:13:40,210 And so actually we need to now replace result by this.data. 248 248 00:13:43,030 --> 00:13:47,853 So this.data and then all of that. 249 249 00:13:49,940 --> 00:13:51,200 Okay. 250 250 00:13:51,200 --> 00:13:53,130 And so here we want to render it 251 251 00:13:53,130 --> 00:13:58,093 and set the render parameter to false. 252 252 00:13:59,280 --> 00:14:00,113 Okay. 253 253 00:14:00,113 --> 00:14:03,050 So that was a lot to take in. 254 254 00:14:03,050 --> 00:14:06,230 So let's recap what happens here. 255 255 00:14:06,230 --> 00:14:08,950 So the first part I think is obvious. 256 256 00:14:08,950 --> 00:14:12,980 So what happens when bookmarksView.render is called? 257 257 00:14:12,980 --> 00:14:15,423 So we then enter this method here. 258 258 00:14:16,460 --> 00:14:19,810 Now, since we didn't duplicate the same code here 259 259 00:14:19,810 --> 00:14:22,040 of previewView. 260 260 00:14:22,040 --> 00:14:25,650 So basically this way here of generating this preview, 261 261 00:14:25,650 --> 00:14:29,193 we essentially separated that into its own child view. 262 262 00:14:30,560 --> 00:14:33,320 And so then here in the bookmarksView, 263 263 00:14:33,320 --> 00:14:37,880 we try to render basically that view 264 264 00:14:37,880 --> 00:14:39,770 for each of the bookmarks, 265 265 00:14:39,770 --> 00:14:42,720 but instead of actually rendering it to the dam. 266 266 00:14:42,720 --> 00:14:45,280 We simply have to render method returned 267 267 00:14:45,280 --> 00:14:47,370 to markup as a string. 268 268 00:14:47,370 --> 00:14:49,940 So that's why we set it here to faults, 269 269 00:14:49,940 --> 00:14:53,653 which will then trigger this code here. 270 270 00:14:54,780 --> 00:14:55,613 Right. 271 271 00:14:56,648 --> 00:15:00,690 And so then all of this year will basically become a string. 272 272 00:15:00,690 --> 00:15:01,720 And so in the end, 273 273 00:15:01,720 --> 00:15:06,580 we end up with an array of strings. 274 274 00:15:06,580 --> 00:15:07,930 So because of map, 275 275 00:15:07,930 --> 00:15:10,870 and then in the end we join all of that together 276 276 00:15:10,870 --> 00:15:13,160 and end up with a big string 277 277 00:15:13,160 --> 00:15:16,220 with all the markup that we want to render. 278 278 00:15:16,220 --> 00:15:17,910 So let's see what happens here. 279 279 00:15:20,222 --> 00:15:22,050 So as we click, 280 280 00:15:22,050 --> 00:15:23,350 let's see the console here 281 281 00:15:24,190 --> 00:15:26,393 and it looks like we didn't get any error. 282 282 00:15:27,830 --> 00:15:32,730 And so indeed now here or bookmarks still work. 283 283 00:15:32,730 --> 00:15:35,180 Now the search here will not yet work 284 284 00:15:36,330 --> 00:15:38,540 because we still need to put this here 285 285 00:15:39,720 --> 00:15:41,403 in the results view. 286 286 00:15:43,830 --> 00:15:45,400 But that's very easy. 287 287 00:15:45,400 --> 00:15:48,280 All we have to do now is to copy this code 288 288 00:15:49,880 --> 00:15:51,103 and put it here, 289 289 00:15:54,589 --> 00:15:56,557 and here we can now call this result. 290 290 00:15:58,230 --> 00:16:01,710 But of course it would have worked exactly the same way. 291 291 00:16:01,710 --> 00:16:05,213 And we also need to import the previewView, 292 292 00:16:08,520 --> 00:16:09,893 but that should be it. 293 293 00:16:11,200 --> 00:16:15,170 And so now these two views are essentially the same thing, 294 294 00:16:15,170 --> 00:16:17,350 but the only difference that they have a different 295 295 00:16:17,350 --> 00:16:20,970 parent element and a different error message. 296 296 00:16:20,970 --> 00:16:21,803 Right. 297 297 00:16:21,803 --> 00:16:24,200 But the main functionality of them. 298 298 00:16:24,200 --> 00:16:27,080 So the main way of generating the markup 299 299 00:16:27,080 --> 00:16:29,140 is essentially the same for them. 300 300 00:16:29,140 --> 00:16:32,110 And so in order to encapsulate that somewhere, 301 301 00:16:32,110 --> 00:16:34,853 we created another child class. 302 302 00:16:35,700 --> 00:16:37,150 And so that is again, 303 303 00:16:37,150 --> 00:16:38,183 this one here. 304 304 00:16:39,910 --> 00:16:41,540 Okay. 305 305 00:16:41,540 --> 00:16:44,230 So please analyze this here. 306 306 00:16:44,230 --> 00:16:45,960 After this video is done 307 307 00:16:45,960 --> 00:16:48,400 and really take a look at how the data 308 308 00:16:48,400 --> 00:16:50,890 flows between these different modules 309 309 00:16:50,890 --> 00:16:54,050 and between these different classes. 310 310 00:16:54,050 --> 00:16:54,883 All right. 311 311 00:16:56,380 --> 00:16:57,283 So let's see. 312 312 00:16:58,150 --> 00:17:00,133 And indeed it still works. 313 313 00:17:01,990 --> 00:17:04,440 So here for now we get no message 314 314 00:17:04,440 --> 00:17:06,643 because we don't have any bookmarks yet, 315 315 00:17:08,150 --> 00:17:09,373 but as we click it, 316 316 00:17:10,260 --> 00:17:12,410 then that should appear there. 317 317 00:17:12,410 --> 00:17:17,410 Let's add another one and beautiful. 318 318 00:17:17,420 --> 00:17:19,690 So that works great. 319 319 00:17:19,690 --> 00:17:22,040 Here we can then come back to the next one 320 320 00:17:23,320 --> 00:17:25,153 and now let's un-bookmark it. 321 321 00:17:26,870 --> 00:17:28,360 So it should disappear now 322 322 00:17:29,430 --> 00:17:32,522 and now un-bookmark this one as well. 323 323 00:17:32,522 --> 00:17:37,070 And then we get automatically this message here. 324 324 00:17:37,070 --> 00:17:39,700 So the no bookmarks yet message, 325 325 00:17:39,700 --> 00:17:41,770 which of course automatically comes 326 326 00:17:42,870 --> 00:17:45,790 here from this error message that we specified 327 327 00:17:45,790 --> 00:17:47,173 in this bookmarks view. 328 328 00:17:48,560 --> 00:17:50,630 So that's really great. 329 329 00:17:50,630 --> 00:17:52,530 So our application 330 330 00:17:52,530 --> 00:17:56,090 is becoming almost finished actually, 331 331 00:17:56,090 --> 00:17:58,080 and now all that we want to do here 332 332 00:17:58,080 --> 00:18:01,810 to finish the bookmarks is to actually persist it 333 333 00:18:01,810 --> 00:18:03,800 and between page loads. 334 334 00:18:03,800 --> 00:18:05,330 So right now, of course, 335 335 00:18:05,330 --> 00:18:07,250 this one here is bookmarked, 336 336 00:18:07,250 --> 00:18:10,030 but now as we reload the page, 337 337 00:18:10,030 --> 00:18:13,010 then that bookmark is gone. 338 338 00:18:13,010 --> 00:18:14,300 Right. 339 339 00:18:14,300 --> 00:18:15,610 So it's no longer here 340 340 00:18:15,610 --> 00:18:18,720 and it's also no longer up here. 341 341 00:18:18,720 --> 00:18:20,910 And so now what we're gonna do next 342 342 00:18:20,910 --> 00:18:24,970 is to store or bookmarks data into the local storage. 343 343 00:18:24,970 --> 00:18:26,660 And then as we load the page, 344 344 00:18:26,660 --> 00:18:29,343 we basically get that data back. 27897