WEBVTT 1 00:00:01.110 --> 00:00:02.620 So in this lecture, 2 00:00:02.620 --> 00:00:06.623 we will finish implementing the bookmarking functionality. 3 00:00:08.010 --> 00:00:10.860 And remember that basically the only thing 4 00:00:10.860 --> 00:00:12.600 that is still missing 5 00:00:12.600 --> 00:00:15.703 is that when we bookmark a recipe like this, 6 00:00:15.703 --> 00:00:18.810 then we want that recipe to show up here 7 00:00:18.810 --> 00:00:20.880 in the bookmarks panel. 8 00:00:20.880 --> 00:00:23.200 So right now that is still empty 9 00:00:23.200 --> 00:00:26.810 and we only see this friendly message here. 10 00:00:26.810 --> 00:00:29.103 And so let's now go fix that. 11 00:00:30.410 --> 00:00:34.040 So taking a look at or mark up here, 12 00:00:34.040 --> 00:00:39.040 we can see right here, 13 00:00:40.000 --> 00:00:41.963 so we can see that in the bookmarks, 14 00:00:42.940 --> 00:00:46.653 we will actually have also the preview element. 15 00:00:47.770 --> 00:00:49.770 So this one here, 16 00:00:49.770 --> 00:00:52.260 so basically a list element 17 00:00:52.260 --> 00:00:54.410 with the class of preview in it, 18 00:00:54.410 --> 00:00:58.260 just like we had here for the search results. 19 00:00:58.260 --> 00:01:01.960 And so this is actually the exact same code. 20 00:01:01.960 --> 00:01:05.700 And so now in order to create this bookmarks view, 21 00:01:05.700 --> 00:01:08.200 I can actually simply go ahead 22 00:01:08.200 --> 00:01:11.783 and copy this one here from the results. 23 00:01:13.187 --> 00:01:14.150 Okay. 24 00:01:14.150 --> 00:01:15.950 So at least for now, 25 00:01:15.950 --> 00:01:18.780 by the end of this video we will then kind 26 00:01:18.780 --> 00:01:20.600 of refactor all this, 27 00:01:20.600 --> 00:01:22.850 but for now let me simply copy the code here. 28 00:01:23.950 --> 00:01:27.820 And here create the bookmarksView.js. 29 00:01:33.080 --> 00:01:34.463 And then here of course, 30 00:01:35.860 --> 00:01:37.980 it is called BookmarksView. 31 00:01:42.600 --> 00:01:43.433 Okay. 32 00:01:43.433 --> 00:01:46.720 Then we also need to change the parent element, 33 00:01:46.720 --> 00:01:48.420 which in this case will be 34 00:01:48.420 --> 00:01:51.913 this unordered list called Bookmarks_List, 35 00:01:54.540 --> 00:01:58.399 right here and here. 36 00:01:58.399 --> 00:02:03.399 The error message should be no bookmarks yet, 37 00:02:06.600 --> 00:02:11.593 find a nice recipe and bookmark it. 38 00:02:16.480 --> 00:02:17.430 All right. 39 00:02:17.430 --> 00:02:19.360 But the rest of the code here 40 00:02:19.360 --> 00:02:21.303 is actually going to be the same. 41 00:02:22.280 --> 00:02:23.823 And so let's now go here. 42 00:02:24.791 --> 00:02:26.450 This one we can close. 43 00:02:26.450 --> 00:02:28.570 That's no good to the controller 44 00:02:28.570 --> 00:02:31.230 and include that here. 45 00:02:31.230 --> 00:02:33.640 And let's actually do that below this one, 46 00:02:33.640 --> 00:02:35.863 just because it is so similar. 47 00:02:37.150 --> 00:02:41.000 So results and bookmarks 48 00:02:42.840 --> 00:02:45.310 or actually let's do it here at the end, 49 00:02:45.310 --> 00:02:49.420 so that results and pagination stay together. 50 00:02:49.420 --> 00:02:51.700 And so now all we want to do 51 00:02:51.700 --> 00:02:55.760 at least for now is that whenever a new bookmark is added, 52 00:02:55.760 --> 00:02:58.230 we want to render the bookmarks view 53 00:02:58.230 --> 00:03:00.290 with all the bookmarks. 54 00:03:00.290 --> 00:03:02.493 So with the array of bookmarks. 55 00:03:03.550 --> 00:03:08.043 So is right here in controlAddBookmarks , 56 00:03:11.820 --> 00:03:13.620 delete all these console.logs 57 00:03:14.750 --> 00:03:17.080 and as always add some comments. 58 00:03:17.080 --> 00:03:22.080 So add or remove a bookmark, 59 00:03:22.830 --> 00:03:23.773 then here, 60 00:03:27.290 --> 00:03:30.433 update recipe view. 61 00:03:32.540 --> 00:03:35.347 And then here actually render to bookmarks. 62 00:03:38.170 --> 00:03:42.000 So that is bookmarksView.render 63 00:03:42.890 --> 00:03:44.960 and see how beautiful, 64 00:03:44.960 --> 00:03:47.240 and now everything comes together 65 00:03:47.240 --> 00:03:49.490 or basically fits together. 66 00:03:49.490 --> 00:03:51.910 So we always have this render method 67 00:03:51.910 --> 00:03:55.550 and we already know that we can call it on all the views. 68 00:03:55.550 --> 00:03:58.930 And so that's really nice about having an architecture, 69 00:03:58.930 --> 00:04:00.703 a structure like this. 70 00:04:01.680 --> 00:04:06.400 So that's going to be model.state.bookmarks. 71 00:04:06.400 --> 00:04:08.970 And so this is also the reason why, 72 00:04:08.970 --> 00:04:11.660 why in the state we didn't only store 73 00:04:11.660 --> 00:04:14.020 the IDs of the bookmarks, 74 00:04:14.020 --> 00:04:17.570 but really we stored the entire data about the bookmarks. 75 00:04:17.570 --> 00:04:20.520 So that we can nicely display them in this list. 76 00:04:20.520 --> 00:04:23.710 So a list that will look exactly like 77 00:04:24.970 --> 00:04:26.433 the result list here. 78 00:04:27.640 --> 00:04:31.163 So this should now actually already be working. 79 00:04:32.730 --> 00:04:35.160 So let's click this one here now, 80 00:04:35.160 --> 00:04:36.513 edit as a bookmark. 81 00:04:37.380 --> 00:04:39.253 And now when we come here, 82 00:04:39.253 --> 00:04:40.943 done there it is. 83 00:04:41.780 --> 00:04:42.613 Great. 84 00:04:44.470 --> 00:04:46.400 So let's try another one. 85 00:04:46.400 --> 00:04:49.203 And or bookmark here is still there. 86 00:04:50.150 --> 00:04:52.210 Now, if we add another one, 87 00:04:52.210 --> 00:04:53.290 done. 88 00:04:53.290 --> 00:04:55.350 Now we have two of them. 89 00:04:55.350 --> 00:04:57.890 And you can see that it also already 90 00:04:57.890 --> 00:05:01.520 automatically highlights the current recipe. 91 00:05:01.520 --> 00:05:03.950 So the one we are currently seeing, 92 00:05:03.950 --> 00:05:05.803 so if we now go to this one again. 93 00:05:06.750 --> 00:05:09.170 well, 10 the spicy chicken 94 00:05:09.170 --> 00:05:13.370 should actually be the selected one here. 95 00:05:13.370 --> 00:05:16.223 And so apparently we still have some kind of bug. 96 00:05:17.130 --> 00:05:19.280 So basically what we have to do here 97 00:05:19.280 --> 00:05:22.000 is that each time that we display a recipe. 98 00:05:22.000 --> 00:05:25.140 We should probably update this entire 99 00:05:25.140 --> 00:05:26.690 bookmarks panel here. 100 00:05:26.690 --> 00:05:30.310 So this view so that it can then basically 101 00:05:30.310 --> 00:05:34.840 select or highlight here the current recipe. 102 00:05:34.840 --> 00:05:39.840 So let's do that in the control recipe function, 103 00:05:40.550 --> 00:05:44.513 and you see that this one here is getting really crowded. 104 00:05:45.420 --> 00:05:46.993 So let's do that here. 105 00:05:48.510 --> 00:05:53.293 So bookmarksView.update and then again, 106 00:05:54.860 --> 00:05:59.853 model.state.bookmarks. 107 00:06:02.530 --> 00:06:03.363 Okay. 108 00:06:08.640 --> 00:06:10.193 So let's add this one. 109 00:06:12.630 --> 00:06:15.270 Okay, that worked nicely. 110 00:06:15.270 --> 00:06:19.350 And now this one here became the current one, 111 00:06:19.350 --> 00:06:21.370 but now let's go to some other one, 112 00:06:21.370 --> 00:06:24.580 which is not any of the bookmarks. 113 00:06:24.580 --> 00:06:29.300 And so now none of them you see here is selected. 114 00:06:29.300 --> 00:06:30.200 And so of course, 115 00:06:30.200 --> 00:06:33.990 that makes sense because while this is not one 116 00:06:33.990 --> 00:06:35.170 of the bookmarks. 117 00:06:35.170 --> 00:06:37.030 But now if we click here, 118 00:06:37.030 --> 00:06:39.643 then this one is of course the selected one. 119 00:06:40.890 --> 00:06:42.930 Now we can click here as well. 120 00:06:42.930 --> 00:06:44.740 Because again, 121 00:06:44.740 --> 00:06:47.060 these elements here are basically just 122 00:06:47.060 --> 00:06:49.180 the same as these ones. 123 00:06:49.180 --> 00:06:50.210 So when we click here, 124 00:06:50.210 --> 00:06:52.600 it loads the corresponding recipe 125 00:06:52.600 --> 00:06:53.733 and here are the same. 126 00:06:56.170 --> 00:07:00.470 So you see that now we went back to this one 127 00:07:00.470 --> 00:07:02.660 and this one got selected correctly. 128 00:07:02.660 --> 00:07:05.450 This one got selected correctly as well. 129 00:07:05.450 --> 00:07:08.770 And we also got the correct recipe 130 00:07:08.770 --> 00:07:11.260 and that's just amazing. 131 00:07:11.260 --> 00:07:13.200 So you'll see how easy it is now 132 00:07:13.200 --> 00:07:17.200 to integrate a new feature like this bookmark feature. 133 00:07:17.200 --> 00:07:20.280 When we already have a very nice architecture 134 00:07:20.280 --> 00:07:22.320 and structure in our code. 135 00:07:22.320 --> 00:07:26.090 Imagine that we had all of this code here, 136 00:07:26.090 --> 00:07:29.160 simply in one huge messy file. 137 00:07:29.160 --> 00:07:32.060 Then how difficult would it be to keep track 138 00:07:32.060 --> 00:07:35.340 of all the data and of how these different 139 00:07:35.340 --> 00:07:38.800 functions all interact with one another. 140 00:07:38.800 --> 00:07:42.350 Now, just to finish we need to fix the fact 141 00:07:42.350 --> 00:07:45.893 that these two views here are essentially the same. 142 00:07:46.730 --> 00:07:49.390 So at least the markup that they generate 143 00:07:49.390 --> 00:07:51.850 is in fact exactly the same. 144 00:07:51.850 --> 00:07:55.690 And so that is of course not good. 145 00:07:55.690 --> 00:07:58.790 So what I will do now is to basically implement 146 00:07:58.790 --> 00:08:01.750 a view that is kind of a parent view 147 00:08:01.750 --> 00:08:04.040 of these two views, 148 00:08:04.040 --> 00:08:07.113 and that will be called the previewView. 149 00:08:08.010 --> 00:08:10.843 So because this element here is called preview. 150 00:08:11.770 --> 00:08:16.770 And so then that can contain all of these methods here. 151 00:08:16.850 --> 00:08:20.360 And then in the generate markup of these two, 152 00:08:20.360 --> 00:08:22.483 we will then use those two. 153 00:08:23.460 --> 00:08:25.650 So but instead of explaining it, 154 00:08:25.650 --> 00:08:27.750 let me actually show it. 155 00:08:27.750 --> 00:08:32.750 So that's a previewView.js. 156 00:08:35.050 --> 00:08:38.933 And now let me get all of this here. 157 00:08:42.870 --> 00:08:43.703 All right. 158 00:08:45.070 --> 00:08:47.633 So this will now be called PreviewView. 159 00:08:51.030 --> 00:08:52.650 And what this view will do 160 00:08:52.650 --> 00:08:54.530 is to basically only generate 161 00:08:54.530 --> 00:08:57.113 one preview element like this here. 162 00:08:58.440 --> 00:08:59.980 All right. 163 00:08:59.980 --> 00:09:02.980 So this one will not have any message. 164 00:09:02.980 --> 00:09:05.180 It will not have an error message. 165 00:09:05.180 --> 00:09:08.363 And the parent element is also not important. 166 00:09:09.350 --> 00:09:11.450 So just follow me here for now. 167 00:09:11.450 --> 00:09:14.020 And I will explain why that is. 168 00:09:14.020 --> 00:09:16.653 So here I will simply select everything. 169 00:09:17.650 --> 00:09:21.173 Or in fact I could simply set this here to an empty string. 170 00:09:22.290 --> 00:09:25.190 So we don't need any parent element here. 171 00:09:25.190 --> 00:09:30.040 And actually this year is only the generate markup 172 00:09:31.450 --> 00:09:33.313 and here we don't need any of this. 173 00:09:35.880 --> 00:09:36.920 Okay. 174 00:09:36.920 --> 00:09:37.910 So again, 175 00:09:37.910 --> 00:09:41.770 this preview view will only generate the markup 176 00:09:41.770 --> 00:09:44.423 for one of these preview elements. 177 00:09:45.820 --> 00:09:46.653 All right. 178 00:09:48.100 --> 00:09:50.800 So now let's come here to the bookmarksView 179 00:09:50.800 --> 00:09:55.333 and get rid of this method here, 180 00:09:56.500 --> 00:09:59.420 so that we don't need anymore. 181 00:09:59.420 --> 00:10:01.283 And now here comes the magic. 182 00:10:02.460 --> 00:10:04.200 So as I mentioned before, 183 00:10:04.200 --> 00:10:08.040 we will use the previewView kind of as a child view 184 00:10:08.040 --> 00:10:11.900 of the bookmarksView and of the resultsView. 185 00:10:11.900 --> 00:10:14.423 So let's import the previewView here. 186 00:10:16.890 --> 00:10:18.940 So import previewView 187 00:10:23.460 --> 00:10:28.240 from .js 188 00:10:29.410 --> 00:10:32.890 and now what we will do here 189 00:10:32.890 --> 00:10:35.970 is to still loop over this.data, 190 00:10:35.970 --> 00:10:38.660 which is still all of the bookmarks. 191 00:10:38.660 --> 00:10:40.640 But now what we want to do here 192 00:10:40.640 --> 00:10:44.423 is to call basically this generate markup. 193 00:10:45.870 --> 00:10:48.340 However, that would not really work. 194 00:10:48.340 --> 00:10:51.763 And so what we really want is this. 195 00:10:52.610 --> 00:10:54.603 So result, 196 00:10:56.600 --> 00:10:57.930 and then for each of them, 197 00:10:57.930 --> 00:11:02.640 we want preview.render, 198 00:11:02.640 --> 00:11:03.473 actually. 199 00:11:04.440 --> 00:11:06.770 So with the result, 200 00:11:06.770 --> 00:11:09.360 but actually that is not all yet 201 00:11:09.360 --> 00:11:12.070 because like this wouldn't work. 202 00:11:12.070 --> 00:11:15.923 But let's quickly analyze what is going to happen here. 203 00:11:16.900 --> 00:11:19.500 So these three here, 204 00:11:19.500 --> 00:11:23.640 so as the render method on bookmarksView is called, 205 00:11:23.640 --> 00:11:27.040 so this render method, 206 00:11:27.040 --> 00:11:29.760 it will set the data on the bookmarksView 207 00:11:29.760 --> 00:11:32.150 and then it will generate the markup. 208 00:11:32.150 --> 00:11:36.680 So it will call this method here. 209 00:11:36.680 --> 00:11:39.840 And so this gets access to this.data, 210 00:11:39.840 --> 00:11:42.600 and then we map over that data. 211 00:11:42.600 --> 00:11:45.170 And so for each of the results, 212 00:11:45.170 --> 00:11:49.690 or let's actually call it bookmarks here. 213 00:11:49.690 --> 00:11:51.590 So bookmark. 214 00:11:51.590 --> 00:11:53.463 So for each of this bookmark, 215 00:11:54.570 --> 00:11:55.993 so not the boom mark. 216 00:11:57.010 --> 00:11:58.830 So for each of the bookmarks, 217 00:11:58.830 --> 00:12:02.280 we want to then render a preview. 218 00:12:02.280 --> 00:12:06.610 However, here we actually need to return a string. 219 00:12:06.610 --> 00:12:09.040 So all of this should be a string 220 00:12:09.040 --> 00:12:12.540 that we need to return from the generate markup method. 221 00:12:12.540 --> 00:12:14.193 So that then in the view, 222 00:12:15.070 --> 00:12:18.340 it can insert that markup into the dam. 223 00:12:18.340 --> 00:12:19.940 Right. 224 00:12:19.940 --> 00:12:22.210 However, by having render here, 225 00:12:22.210 --> 00:12:27.170 preview.js itself we'll try to render some markup. 226 00:12:27.170 --> 00:12:29.990 And so that is not really going to work. 227 00:12:29.990 --> 00:12:32.610 And so what we will do is to change 228 00:12:32.610 --> 00:12:34.500 or render method here 229 00:12:34.500 --> 00:12:36.593 and add a second parameter to it. 230 00:12:37.430 --> 00:12:40.623 So here we will add a parameter called render, 231 00:12:41.620 --> 00:12:44.183 which by default will be set to true. 232 00:12:45.840 --> 00:12:49.390 So then all of this here stays the same, 233 00:12:49.390 --> 00:12:51.943 but if render is false, 234 00:12:53.610 --> 00:12:56.853 which is what we will set it to in a minute. 235 00:12:57.760 --> 00:12:59.460 So if render is false, 236 00:12:59.460 --> 00:13:01.590 then we actually want to return 237 00:13:02.530 --> 00:13:05.483 this markup that was just generated. 238 00:13:06.400 --> 00:13:09.650 Now, why don't we simply call generate markup 239 00:13:09.650 --> 00:13:13.823 itself without messing with the whole render method. 240 00:13:15.090 --> 00:13:16.190 So here, 241 00:13:16.190 --> 00:13:21.170 why don't we simply call previewView.generate markup? 242 00:13:21.170 --> 00:13:23.870 Well, that's because we still 243 00:13:23.870 --> 00:13:26.710 need it to set the data property 244 00:13:26.710 --> 00:13:29.240 to the data that we passed in. 245 00:13:29.240 --> 00:13:32.730 So that then here in the previewView, 246 00:13:32.730 --> 00:13:35.210 we can use this keyword. 247 00:13:35.210 --> 00:13:40.210 And so actually we need to now replace result by this.data. 248 00:13:43.030 --> 00:13:47.853 So this.data and then all of that. 249 00:13:49.940 --> 00:13:51.200 Okay. 250 00:13:51.200 --> 00:13:53.130 And so here we want to render it 251 00:13:53.130 --> 00:13:58.093 and set the render parameter to false. 252 00:13:59.280 --> 00:14:00.113 Okay. 253 00:14:00.113 --> 00:14:03.050 So that was a lot to take in. 254 00:14:03.050 --> 00:14:06.230 So let's recap what happens here. 255 00:14:06.230 --> 00:14:08.950 So the first part I think is obvious. 256 00:14:08.950 --> 00:14:12.980 So what happens when bookmarksView.render is called? 257 00:14:12.980 --> 00:14:15.423 So we then enter this method here. 258 00:14:16.460 --> 00:14:19.810 Now, since we didn't duplicate the same code here 259 00:14:19.810 --> 00:14:22.040 of previewView. 260 00:14:22.040 --> 00:14:25.650 So basically this way here of generating this preview, 261 00:14:25.650 --> 00:14:29.193 we essentially separated that into its own child view. 262 00:14:30.560 --> 00:14:33.320 And so then here in the bookmarksView, 263 00:14:33.320 --> 00:14:37.880 we try to render basically that view 264 00:14:37.880 --> 00:14:39.770 for each of the bookmarks, 265 00:14:39.770 --> 00:14:42.720 but instead of actually rendering it to the dam. 266 00:14:42.720 --> 00:14:45.280 We simply have to render method returned 267 00:14:45.280 --> 00:14:47.370 to markup as a string. 268 00:14:47.370 --> 00:14:49.940 So that's why we set it here to faults, 269 00:14:49.940 --> 00:14:53.653 which will then trigger this code here. 270 00:14:54.780 --> 00:14:55.613 Right. 271 00:14:56.648 --> 00:15:00.690 And so then all of this year will basically become a string. 272 00:15:00.690 --> 00:15:01.720 And so in the end, 273 00:15:01.720 --> 00:15:06.580 we end up with an array of strings. 274 00:15:06.580 --> 00:15:07.930 So because of map, 275 00:15:07.930 --> 00:15:10.870 and then in the end we join all of that together 276 00:15:10.870 --> 00:15:13.160 and end up with a big string 277 00:15:13.160 --> 00:15:16.220 with all the markup that we want to render. 278 00:15:16.220 --> 00:15:17.910 So let's see what happens here. 279 00:15:20.222 --> 00:15:22.050 So as we click, 280 00:15:22.050 --> 00:15:23.350 let's see the console here 281 00:15:24.190 --> 00:15:26.393 and it looks like we didn't get any error. 282 00:15:27.830 --> 00:15:32.730 And so indeed now here or bookmarks still work. 283 00:15:32.730 --> 00:15:35.180 Now the search here will not yet work 284 00:15:36.330 --> 00:15:38.540 because we still need to put this here 285 00:15:39.720 --> 00:15:41.403 in the results view. 286 00:15:43.830 --> 00:15:45.400 But that's very easy. 287 00:15:45.400 --> 00:15:48.280 All we have to do now is to copy this code 288 00:15:49.880 --> 00:15:51.103 and put it here, 289 00:15:54.589 --> 00:15:56.557 and here we can now call this result. 290 00:15:58.230 --> 00:16:01.710 But of course it would have worked exactly the same way. 291 00:16:01.710 --> 00:16:05.213 And we also need to import the previewView, 292 00:16:08.520 --> 00:16:09.893 but that should be it. 293 00:16:11.200 --> 00:16:15.170 And so now these two views are essentially the same thing, 294 00:16:15.170 --> 00:16:17.350 but the only difference that they have a different 295 00:16:17.350 --> 00:16:20.970 parent element and a different error message. 296 00:16:20.970 --> 00:16:21.803 Right. 297 00:16:21.803 --> 00:16:24.200 But the main functionality of them. 298 00:16:24.200 --> 00:16:27.080 So the main way of generating the markup 299 00:16:27.080 --> 00:16:29.140 is essentially the same for them. 300 00:16:29.140 --> 00:16:32.110 And so in order to encapsulate that somewhere, 301 00:16:32.110 --> 00:16:34.853 we created another child class. 302 00:16:35.700 --> 00:16:37.150 And so that is again, 303 00:16:37.150 --> 00:16:38.183 this one here. 304 00:16:39.910 --> 00:16:41.540 Okay. 305 00:16:41.540 --> 00:16:44.230 So please analyze this here. 306 00:16:44.230 --> 00:16:45.960 After this video is done 307 00:16:45.960 --> 00:16:48.400 and really take a look at how the data 308 00:16:48.400 --> 00:16:50.890 flows between these different modules 309 00:16:50.890 --> 00:16:54.050 and between these different classes. 310 00:16:54.050 --> 00:16:54.883 All right. 311 00:16:56.380 --> 00:16:57.283 So let's see. 312 00:16:58.150 --> 00:17:00.133 And indeed it still works. 313 00:17:01.990 --> 00:17:04.440 So here for now we get no message 314 00:17:04.440 --> 00:17:06.643 because we don't have any bookmarks yet, 315 00:17:08.150 --> 00:17:09.373 but as we click it, 316 00:17:10.260 --> 00:17:12.410 then that should appear there. 317 00:17:12.410 --> 00:17:17.410 Let's add another one and beautiful. 318 00:17:17.420 --> 00:17:19.690 So that works great. 319 00:17:19.690 --> 00:17:22.040 Here we can then come back to the next one 320 00:17:23.320 --> 00:17:25.153 and now let's un-bookmark it. 321 00:17:26.870 --> 00:17:28.360 So it should disappear now 322 00:17:29.430 --> 00:17:32.522 and now un-bookmark this one as well. 323 00:17:32.522 --> 00:17:37.070 And then we get automatically this message here. 324 00:17:37.070 --> 00:17:39.700 So the no bookmarks yet message, 325 00:17:39.700 --> 00:17:41.770 which of course automatically comes 326 00:17:42.870 --> 00:17:45.790 here from this error message that we specified 327 00:17:45.790 --> 00:17:47.173 in this bookmarks view. 328 00:17:48.560 --> 00:17:50.630 So that's really great. 329 00:17:50.630 --> 00:17:52.530 So our application 330 00:17:52.530 --> 00:17:56.090 is becoming almost finished actually, 331 00:17:56.090 --> 00:17:58.080 and now all that we want to do here 332 00:17:58.080 --> 00:18:01.810 to finish the bookmarks is to actually persist it 333 00:18:01.810 --> 00:18:03.800 and between page loads. 334 00:18:03.800 --> 00:18:05.330 So right now, of course, 335 00:18:05.330 --> 00:18:07.250 this one here is bookmarked, 336 00:18:07.250 --> 00:18:10.030 but now as we reload the page, 337 00:18:10.030 --> 00:18:13.010 then that bookmark is gone. 338 00:18:13.010 --> 00:18:14.300 Right. 339 00:18:14.300 --> 00:18:15.610 So it's no longer here 340 00:18:15.610 --> 00:18:18.720 and it's also no longer up here. 341 00:18:18.720 --> 00:18:20.910 And so now what we're gonna do next 342 00:18:20.910 --> 00:18:24.970 is to store or bookmarks data into the local storage. 343 00:18:24.970 --> 00:18:26.660 And then as we load the page, 344 00:18:26.660 --> 00:18:29.343 we basically get that data back.