Original subtitles

1 1

So in this lecture, 2

2

we will finish implementing the bookmarking functionality. 3

3

And remember that basically the only thing 4

4

that is still missing 5

5

is that when we bookmark a recipe like this, 6

6

then we want that recipe to show up here 7

7

in the bookmarks panel. 8

8

So right now that is still empty 9

9

and we only see this friendly message here. 10

10

And so let's now go fix that. 11

11

So taking a look at or mark up here, 12

12

we can see right here, 13

13

so we can see that in the bookmarks, 14

14

we will actually have also the preview element. 15

15

So this one here, 16

16

so basically a list element 17

17

with the class of preview in it, 18

18

just like we had here for the search results. 19

19

And so this is actually the exact same code. 20

20

And so now in order to create this bookmarks view, 21

21

I can actually simply go ahead 22

22

and copy this one here from the results. 23

23

Okay. 24

24

So at least for now, 25

25

by the end of this video we will then kind 26

26

of refactor all this, 27

27

but for now let me simply copy the code here. 28

28

And here create the bookmarksView.js. 29

29

And then here of course, 30

30

it is called BookmarksView. 31

31

Okay. 32

32

Then we also need to change the parent element, 33

33

which in this case will be 34

34

this unordered list called Bookmarks_List, 35

35

right here and here. 36

36

The error message should be no bookmarks yet, 37

37

find a nice recipe and bookmark it. 38

38

All right. 39

39

But the rest of the code here 40

40

is actually going to be the same. 41

41

And so let's now go here. 42

42

This one we can close. 43

43

That's no good to the controller 44

44

and include that here. 45

45

And let's actually do that below this one, 46

46

just because it is so similar. 47

47

So results and bookmarks 48

48

or actually let's do it here at the end, 49

49

so that results and pagination stay together. 50

50

And so now all we want to do 51

51

at least for now is that whenever a new bookmark is added, 52

52

we want to render the bookmarks view 53

53

with all the bookmarks. 54

54

So with the array of bookmarks. 55

55

So is right here in controlAddBookmarks , 56

56

delete all these console.logs 57

57

and as always add some comments. 58

58

So add or remove a bookmark, 59

59

then here, 60

60

update recipe view. 61

61

And then here actually render to bookmarks. 62

62

So that is bookmarksView.render 63

63

and see how beautiful, 64

64

and now everything comes together 65

65

or basically fits together. 66

66

So we always have this render method 67

67

and we already know that we can call it on all the views. 68

68

And so that's really nice about having an architecture, 69

69

a structure like this. 70

70

So that's going to be model.state.bookmarks. 71

71

And so this is also the reason why, 72

72

why in the state we didn't only store 73

73

the IDs of the bookmarks, 74

74

but really we stored the entire data about the bookmarks. 75

75

So that we can nicely display them in this list. 76

76

So a list that will look exactly like 77

77

the result list here. 78

78

So this should now actually already be working. 79

79

So let's click this one here now, 80

80

edit as a bookmark. 81

81

And now when we come here, 82

82

done there it is. 83

83

Great. 84

84

So let's try another one. 85

85

And or bookmark here is still there. 86

86

Now, if we add another one, 87

87

done. 88

88

Now we have two of them. 89

89

And you can see that it also already 90

90

automatically highlights the current recipe. 91

91

So the one we are currently seeing, 92

92

so if we now go to this one again. 93

93

well, 10 the spicy chicken 94

94

should actually be the selected one here. 95

95

And so apparently we still have some kind of bug. 96

96

So basically what we have to do here 97

97

is that each time that we display a recipe. 98

98

We should probably update this entire 99

99

bookmarks panel here. 100

100

So this view so that it can then basically 101

101

select or highlight here the current recipe. 102

102

So let's do that in the control recipe function, 103

103

and you see that this one here is getting really crowded. 104

104

So let's do that here. 105

105

So bookmarksView.update and then again, 106

106

model.state.bookmarks. 107

107

Okay. 108

108

So let's add this one. 109

109

Okay, that worked nicely. 110

110

And now this one here became the current one, 111

111

but now let's go to some other one, 112

112

which is not any of the bookmarks. 113

113

And so now none of them you see here is selected. 114

114

And so of course, 115

115

that makes sense because while this is not one 116

116

of the bookmarks. 117

117

But now if we click here, 118

118

then this one is of course the selected one. 119

119

Now we can click here as well. 120

120

Because again, 121

121

these elements here are basically just 122

122

the same as these ones. 123

123

So when we click here, 124

124

it loads the corresponding recipe 125

125

and here are the same. 126

126

So you see that now we went back to this one 127

127

and this one got selected correctly. 128

128

This one got selected correctly as well. 129

129

And we also got the correct recipe 130

130

and that's just amazing. 131

131

So you'll see how easy it is now 132

132

to integrate a new feature like this bookmark feature. 133

133

When we already have a very nice architecture 134

134

and structure in our code. 135

135

Imagine that we had all of this code here, 136

136

simply in one huge messy file. 137

137

Then how difficult would it be to keep track 138

138

of all the data and of how these different 139

139

functions all interact with one another. 140

140

Now, just to finish we need to fix the fact 141

141

that these two views here are essentially the same. 142

142

So at least the markup that they generate 143

143

is in fact exactly the same. 144

144

And so that is of course not good. 145

145

So what I will do now is to basically implement 146

146

a view that is kind of a parent view 147

147

of these two views, 148

148

and that will be called the previewView. 149

149

So because this element here is called preview. 150

150

And so then that can contain all of these methods here. 151

151

And then in the generate markup of these two, 152

152

we will then use those two. 153

153

So but instead of explaining it, 154

154

let me actually show it. 155

155

So that's a previewView.js. 156

156

And now let me get all of this here. 157

157

All right. 158

158

So this will now be called PreviewView. 159

159

And what this view will do 160

160

is to basically only generate 161

161

one preview element like this here. 162

162

All right. 163

163

So this one will not have any message. 164

164

It will not have an error message. 165

165

And the parent element is also not important. 166

166

So just follow me here for now. 167

167

And I will explain why that is. 168

168

So here I will simply select everything. 169

169

Or in fact I could simply set this here to an empty string. 170

170

So we don't need any parent element here. 171

171

And actually this year is only the generate markup 172

172

and here we don't need any of this. 173

173

Okay. 174

174

So again, 175

175

this preview view will only generate the markup 176

176

for one of these preview elements. 177

177

All right. 178

178

So now let's come here to the bookmarksView 179

179

and get rid of this method here, 180

180

so that we don't need anymore. 181

181

And now here comes the magic. 182

182

So as I mentioned before, 183

183

we will use the previewView kind of as a child view 184

184

of the bookmarksView and of the resultsView. 185

185

So let's import the previewView here. 186

186

So import previewView 187

187

from .js 188

188

and now what we will do here 189

189

is to still loop over this.data, 190

190

which is still all of the bookmarks. 191

191

But now what we want to do here 192

192

is to call basically this generate markup. 193

193

However, that would not really work. 194

194

And so what we really want is this. 195

195

So result, 196

196

and then for each of them, 197

197

we want preview.render, 198

198

actually. 199

199

So with the result, 200

200

but actually that is not all yet 201

201

because like this wouldn't work. 202

202

But let's quickly analyze what is going to happen here. 203

203

So these three here, 204

204

so as the render method on bookmarksView is called, 205

205

so this render method, 206

206

it will set the data on the bookmarksView 207

207

and then it will generate the markup. 208

208

So it will call this method here. 209

209

And so this gets access to this.data, 210

210

and then we map over that data. 211

211

And so for each of the results, 212

212

or let's actually call it bookmarks here. 213

213

So bookmark. 214

214

So for each of this bookmark, 215

215

so not the boom mark. 216

216

So for each of the bookmarks, 217

217

we want to then render a preview. 218

218

However, here we actually need to return a string. 219

219

So all of this should be a string 220

220

that we need to return from the generate markup method. 221

221

So that then in the view, 222

222

it can insert that markup into the dam. 223

223

Right. 224

224

However, by having render here, 225

225

preview.js itself we'll try to render some markup. 226

226

And so that is not really going to work. 227

227

And so what we will do is to change 228

228

or render method here 229

229

and add a second parameter to it. 230

230

So here we will add a parameter called render, 231

231

which by default will be set to true. 232

232

So then all of this here stays the same, 233

233

but if render is false, 234

234

which is what we will set it to in a minute. 235

235

So if render is false, 236

236

then we actually want to return 237

237

this markup that was just generated. 238

238

Now, why don't we simply call generate markup 239

239

itself without messing with the whole render method. 240

240

So here, 241

241

why don't we simply call previewView.generate markup? 242

242

Well, that's because we still 243

243

need it to set the data property 244

244

to the data that we passed in. 245

245

So that then here in the previewView, 246

246

we can use this keyword. 247

247

And so actually we need to now replace result by this.data. 248

248

So this.data and then all of that. 249

249

Okay. 250

250

And so here we want to render it 251

251

and set the render parameter to false. 252

252

Okay. 253

253

So that was a lot to take in. 254

254

So let's recap what happens here. 255

255

So the first part I think is obvious. 256

256

So what happens when bookmarksView.render is called? 257

257

So we then enter this method here. 258

258

Now, since we didn't duplicate the same code here 259

259

of previewView. 260

260

So basically this way here of generating this preview, 261

261

we essentially separated that into its own child view. 262

262

And so then here in the bookmarksView, 263

263

we try to render basically that view 264

264

for each of the bookmarks, 265

265

but instead of actually rendering it to the dam. 266

266

We simply have to render method returned 267

267

to markup as a string. 268

268

So that's why we set it here to faults, 269

269

which will then trigger this code here. 270

270

Right. 271

271

And so then all of this year will basically become a string. 272

272

And so in the end, 273

273

we end up with an array of strings. 274

274

So because of map, 275

275

and then in the end we join all of that together 276

276

and end up with a big string 277

277

with all the markup that we want to render. 278

278

So let's see what happens here. 279

279

So as we click, 280

280

let's see the console here 281

281

and it looks like we didn't get any error. 282

282

And so indeed now here or bookmarks still work. 283

283

Now the search here will not yet work 284

284

because we still need to put this here 285

285

in the results view. 286

286

But that's very easy. 287

287

All we have to do now is to copy this code 288

288

and put it here, 289

289

and here we can now call this result. 290

290

But of course it would have worked exactly the same way. 291

291

And we also need to import the previewView, 292

292

but that should be it. 293

293

And so now these two views are essentially the same thing, 294

294

but the only difference that they have a different 295

295

parent element and a different error message. 296

296

Right. 297

297

But the main functionality of them. 298

298

So the main way of generating the markup 299

299

is essentially the same for them. 300

300

And so in order to encapsulate that somewhere, 301

301

we created another child class. 302

302

And so that is again, 303

303

this one here. 304

304

Okay. 305

305

So please analyze this here. 306

306

After this video is done 307

307

and really take a look at how the data 308

308

flows between these different modules 309

309

and between these different classes. 310

310

All right. 311

311

So let's see. 312

312

And indeed it still works. 313

313

So here for now we get no message 314

314

because we don't have any bookmarks yet, 315

315

but as we click it, 316

316

then that should appear there. 317

317

Let's add another one and beautiful. 318

318

So that works great. 319

319

Here we can then come back to the next one 320

320

and now let's un-bookmark it. 321

321

So it should disappear now 322

322

and now un-bookmark this one as well. 323

323

And then we get automatically this message here. 324

324

So the no bookmarks yet message, 325

325

which of course automatically comes 326

326

here from this error message that we specified 327

327

in this bookmarks view. 328

328

So that's really great. 329

329

So our application 330

330

is becoming almost finished actually, 331

331

and now all that we want to do here 332

332

to finish the bookmarks is to actually persist it 333

333

and between page loads. 334

334

So right now, of course, 335

335

this one here is bookmarked, 336

336

but now as we reload the page, 337

337

then that bookmark is gone. 338

338

Right. 339

339

So it's no longer here 340

340

and it's also no longer up here. 341

341

And so now what we're gonna do next 342

342

is to store or bookmarks data into the local storage. 343

343

And then as we load the page, 344

344

we basically get that data back.