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
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.