And in this, we are going to demonstrate how to generate a dynamic content and for example, under
the body are going to create a variable called title and which is equal to some title.
And then we closed a tangled bracket with the presentation side.
Now we we already create a variable.
And if we want to use these variable, for example, we pay the variable here, we open the angles bracket.
And if that percentage slide and since we are going to use the title, we have to use the ecocide here.
And we add the title and we post the angle bracket.
We have the presentation side and then we save it.
Now, if we refresh the page, you can see the some title displayed here, and this is from the variable
title.
And next, we are going to demonstrate how to pass the data from our handle, which is inside the apple.
And for example, we are going to run the index page and we are going to add a variable with the title
again for the title, too.
And then we type in some title to here and which it's a string.
And then we back to the index page and instead of using the title, we use the title too, and then
we refresh the page.
Now you can see it already changed to the title too, which is we set it here.
Now we are going to generate dynamic content inside the list rather than the static content, which
is all the same here.
Now we can visit this.
And also back to the index.
We also delete these wearable and also these template.
Now we are going to create a that has items which is equal to a list of objects, which is equal to
an array of objects, and two hoppity, one is the name and the other used to prize.
Now, we can pass these data by using items, items, and since they are the same, so we can make it
cleaner, just have items here.
And if we go to the container and we just try to dissipate.
Items already, we should put this inside the index page so we cut the coat and paste it to the index
page.
And if we refresh, you can see it already displayed it here.
So now, instead of this Paty outbreak like this, we are going to generate with the least items.
So first of all, we are going to check whether there are items here.
So we use something like the JavaScript and we will change back to each later.
But this is more easier.
So we use if items don't length is greater than zero damage to this pretty template.
Otherwise we will dissipate, in other words, such as download items here and we are going to display
this temporary.
So we copy and paste it here.
And this is gas rather than the JavaScript, although they use the same syntax.
So we delete this script we use here just for the convenience because it has to able to generate the
script.
But now we are going to go back to the gas.
So we use the syntax open to open and go the back part and percent, and then we close with two percent
angle bracket.
So we do the same in the other part.
So here we just type.
There are little items expected to change this to something else.
So it's more easier to distinguish and we can also delete these items.
Now, if we refresh the page, it would dissipate items here because we really has the array of objects.
So if we go to here and we say that the items is equal to empty array, now if we refresh the page and
with that there are items back to the original and go to the index and it is and now we are going to
look through the items and output each of the items.
Again, we are going to use the JavaScript and we use the for each loop.
And this is items and the other item.
And we are going to display this template and then with this square script and change back to gas.
And then if we refresh to pay, it should have two item displayed here.
Yeah, it should be free because we have free items here.
So now here we are going to a change to the dynamic content with item name and also the item, the price.
So we refresh and we should add a dollar sign here.
Now we should use that delete icon and also the edit icon.
So we post here and we change this to there are no items.
Now, we refresh the page.
You can see the dollar side.
The rubbish bin and also the added button, and so this is how we generated dynamic content.