1
00:00:00,090 --> 00:00:03,540
In this lecture, we're going to render the list of clips.

2
00:00:03,870 --> 00:00:06,900
The data is readily available in our components.

3
00:00:07,170 --> 00:00:13,830
The next step is to loop through the clips array in the template, open the Manage template file in

4
00:00:13,830 --> 00:00:14,580
your editor.

5
00:00:17,030 --> 00:00:23,600
In this template, we can find the list of videos by searching for a comment that says video list.

6
00:00:26,100 --> 00:00:29,640
The first div tag will be a container for the list.

7
00:00:29,940 --> 00:00:32,520
It has the grid class applied to it.

8
00:00:32,850 --> 00:00:36,620
Inside this div tag are six additional div tags.

9
00:00:36,960 --> 00:00:40,710
Each tag represents a single video in the dummy list.

10
00:00:41,040 --> 00:00:45,780
You can minimize these sections to get a structural overview of the document.

11
00:00:48,340 --> 00:00:51,940
We're going to remove the last five div tags from the list.

12
00:00:52,270 --> 00:00:53,500
They're dummy elements.

13
00:00:53,710 --> 00:00:59,930
We only need to loop through one of these tags to achieve the desired effect on the div tag.

14
00:01:00,040 --> 00:01:02,440
Applying the end for directive.

15
00:01:04,959 --> 00:01:06,790
The expression will be the following.

16
00:01:07,000 --> 00:01:08,980
Let's clip of clips.

17
00:01:11,440 --> 00:01:14,680
The alias for a single clip will be called Clip.

18
00:01:15,070 --> 00:01:20,380
We won't be able to identify the clips without modifying the static parts of our template.

19
00:01:20,650 --> 00:01:24,490
The two elements that'll be dynamic are the image and title.

20
00:01:24,760 --> 00:01:27,400
We don't have a screenshot of our images.

21
00:01:27,640 --> 00:01:32,650
Therefore, we'll focus on the title search for a comment that says Link.

22
00:01:35,190 --> 00:01:40,800
Under this comment is an anchor element, the first anchor element will contain the title.

23
00:01:41,070 --> 00:01:44,040
Let's replace the static text with an expression.

24
00:01:44,340 --> 00:01:48,030
The expression will output the clip Typekit title property.

25
00:01:50,590 --> 00:01:52,150
Let's give our app a test.

26
00:01:52,420 --> 00:01:54,940
Open the Manage page in your browser.

27
00:01:55,210 --> 00:01:59,860
The dummy items have been replaced with a list of clips uploaded by the user.

28
00:02:00,280 --> 00:02:05,770
You should be able to see a unique title for each of them unless you give them all the same title.

29
00:02:06,010 --> 00:02:06,490
Great.

30
00:02:06,730 --> 00:02:11,770
In the next lecture, we're going to begin adding a form to modify a clip.