1
00:00:00,210 --> 00:00:07,080
And in this, we are going to demonstrate how to generate a dynamic content and for example, under

2
00:00:07,080 --> 00:00:16,110
the body are going to create a variable called title and which is equal to some title.

3
00:00:17,040 --> 00:00:21,420
And then we closed a tangled bracket with the presentation side.

4
00:00:21,810 --> 00:00:23,820
Now we we already create a variable.

5
00:00:24,070 --> 00:00:31,590
And if we want to use these variable, for example, we pay the variable here, we open the angles bracket.

6
00:00:31,590 --> 00:00:39,240
And if that percentage slide and since we are going to use the title, we have to use the ecocide here.

7
00:00:39,480 --> 00:00:43,650
And we add the title and we post the angle bracket.

8
00:00:43,660 --> 00:00:46,330
We have the presentation side and then we save it.

9
00:00:46,650 --> 00:00:54,360
Now, if we refresh the page, you can see the some title displayed here, and this is from the variable

10
00:00:54,600 --> 00:00:54,940
title.

11
00:00:55,500 --> 00:01:01,820
And next, we are going to demonstrate how to pass the data from our handle, which is inside the apple.

12
00:01:02,460 --> 00:01:10,500
And for example, we are going to run the index page and we are going to add a variable with the title

13
00:01:10,500 --> 00:01:12,570
again for the title, too.

14
00:01:12,990 --> 00:01:18,900
And then we type in some title to here and which it's a string.

15
00:01:19,230 --> 00:01:27,330
And then we back to the index page and instead of using the title, we use the title too, and then

16
00:01:27,330 --> 00:01:28,590
we refresh the page.

17
00:01:29,340 --> 00:01:35,740
Now you can see it already changed to the title too, which is we set it here.

18
00:01:36,270 --> 00:01:42,960
Now we are going to generate dynamic content inside the list rather than the static content, which

19
00:01:42,960 --> 00:01:44,310
is all the same here.

20
00:01:45,250 --> 00:01:47,680
Now we can visit this.

21
00:01:48,760 --> 00:01:50,800
And also back to the index.

22
00:01:52,130 --> 00:01:57,380
We also delete these wearable and also these template.

23
00:01:59,010 --> 00:02:06,720
Now we are going to create a that has items which is equal to a list of objects, which is equal to

24
00:02:06,720 --> 00:02:14,940
an array of objects, and two hoppity, one is the name and the other used to prize.

25
00:02:18,180 --> 00:02:28,290
Now, we can pass these data by using items, items, and since they are the same, so we can make it

26
00:02:28,290 --> 00:02:31,200
cleaner, just have items here.

27
00:02:34,190 --> 00:02:39,440
And if we go to the container and we just try to dissipate.

28
00:02:42,290 --> 00:02:51,740
Items already, we should put this inside the index page so we cut the coat and paste it to the index

29
00:02:51,740 --> 00:02:52,200
page.

30
00:02:52,490 --> 00:02:57,500
And if we refresh, you can see it already displayed it here.

31
00:02:57,950 --> 00:03:06,060
So now, instead of this Paty outbreak like this, we are going to generate with the least items.

32
00:03:06,470 --> 00:03:10,310
So first of all, we are going to check whether there are items here.

33
00:03:10,550 --> 00:03:16,030
So we use something like the JavaScript and we will change back to each later.

34
00:03:16,040 --> 00:03:17,840
But this is more easier.

35
00:03:17,870 --> 00:03:26,630
So we use if items don't length is greater than zero damage to this pretty template.

36
00:03:26,940 --> 00:03:34,400
Otherwise we will dissipate, in other words, such as download items here and we are going to display

37
00:03:34,400 --> 00:03:35,450
this temporary.

38
00:03:35,450 --> 00:03:38,120
So we copy and paste it here.

39
00:03:38,300 --> 00:03:44,660
And this is gas rather than the JavaScript, although they use the same syntax.

40
00:03:44,900 --> 00:03:55,610
So we delete this script we use here just for the convenience because it has to able to generate the

41
00:03:56,090 --> 00:03:56,370
script.

42
00:03:56,390 --> 00:03:58,670
But now we are going to go back to the gas.

43
00:03:58,670 --> 00:04:08,330
So we use the syntax open to open and go the back part and percent, and then we close with two percent

44
00:04:08,330 --> 00:04:09,280
angle bracket.

45
00:04:09,300 --> 00:04:12,380
So we do the same in the other part.

46
00:04:12,800 --> 00:04:14,660
So here we just type.

47
00:04:14,660 --> 00:04:21,510
There are little items expected to change this to something else.

48
00:04:22,550 --> 00:04:29,160
So it's more easier to distinguish and we can also delete these items.

49
00:04:29,900 --> 00:04:37,130
Now, if we refresh the page, it would dissipate items here because we really has the array of objects.

50
00:04:37,790 --> 00:04:47,300
So if we go to here and we say that the items is equal to empty array, now if we refresh the page and

51
00:04:47,410 --> 00:04:56,600
with that there are items back to the original and go to the index and it is and now we are going to

52
00:04:56,810 --> 00:05:00,230
look through the items and output each of the items.

53
00:05:00,480 --> 00:05:06,090
Again, we are going to use the JavaScript and we use the for each loop.

54
00:05:06,380 --> 00:05:11,720
And this is items and the other item.

55
00:05:11,960 --> 00:05:21,320
And we are going to display this template and then with this square script and change back to gas.

56
00:05:21,740 --> 00:05:26,230
And then if we refresh to pay, it should have two item displayed here.

57
00:05:26,420 --> 00:05:30,160
Yeah, it should be free because we have free items here.

58
00:05:31,630 --> 00:05:40,930
So now here we are going to a change to the dynamic content with item name and also the item, the price.

59
00:05:43,100 --> 00:05:46,700
So we refresh and we should add a dollar sign here.

60
00:05:47,090 --> 00:05:52,910
Now we should use that delete icon and also the edit icon.

61
00:05:53,060 --> 00:05:58,610
So we post here and we change this to there are no items.

62
00:05:58,880 --> 00:06:00,200
Now, we refresh the page.

63
00:06:00,830 --> 00:06:02,480
You can see the dollar side.

64
00:06:03,510 --> 00:06:12,180
The rubbish bin and also the added button, and so this is how we generated dynamic content.