Template Looping & Conditional HTML

[00:00:00]
>> Template gets more complicated. There is a whole language that you can do over templates but first, what I need, I don't need to render only one exhibition, right? I want all of them. That's why I have a slice of exhibitions. So instead of Sending, 1, I'm going to send, O.

[00:00:25]
Now if you try these now it will give us an error because the template will not actually work because we don't have a title in the slides, we need to actually get into one element. But what we need, we need to repeat this article. We want one article per exhibition.

[00:00:45]
Make sense? To do that we are going to open a control structure for the template. It's called Range. So we are gonna arrange for the current value and we use the dot here because the dot is the collection. And the range has a corresponding end where you express where that ends.

[00:01:08]
And within that range, dot is actually the element that we are looping. It's actually each element. So we don't need to change the template that we have within the article. So this is a for loop. We don't use the for key, we use range. Does it make sense?

[00:01:39]
So if I try this, remember I need to stop the server, run the server again. And I refresh. I have now my front end museum server rendered. That right now is a static, the data is static but it can be received from databases, from a socket, from whatever, and you can see it is written in the HTML.

[00:02:09]
And if you compare that with the one we have in the root, that is not server-side render, it's client-side render, the main has only one article, the first one, the rest are coming from jaskin. So this one is better for performance.
>> If we were to wanna change some of the style this way would we just use like inline styling or?

[00:02:31]
>> Let me see if I get what you want. You say for example that you wanna, have here a change in the one we need. No, this is the JSON, sorry, here. So you wanna have a color thing, and then each exhibition should have a different color. Let's say this one is red, this one is green.

[00:02:59]
This one is blue and there is a color salmon that exists in CSS. I have my missing trailing commas, trailing commas. There we are. So now we have the color as a type. How can we apply this into HTML or CSS? Well, in the template, you can just work with the strings.

[00:03:21]
So something that I can do, for example is go to my article and add a style declaration. And I can say that I wanna change the border, I'm not sure if it's going to look nice. Let me go back to the UI. Well, let's try a border top.

[00:03:41]
10 pixels solid and it goes to color. And there we say okay, we're going to take the color from what we have here like that. Okay, I'm closing this there. Think it's fine. It give me an error. It's give me a CSS error because we are, that's okay.

[00:04:08]
It's not CSS in this case, it says, you cannot use calibrates on CSS but that's the template, not the CSS. We are the different metaverse, okay? So because we are we are using HTML here for the parser. If I change this to go template, then we won't see the error anymore anyway.

[00:04:29]
So let's try it. I'm not saying that you need to use this technique, but now we have red, green, blue and salmon. Actually, that look pretty good. So that's one way. This is inline styling, yeah. The other solution is to change a class based on that and you can use if, like I don't know, you can have a class here and you can say, for example, we can add another property saying if it's open or closed, if it's a future exhibition or it's currently open.

[00:05:05]
So you can say currently open, it's a bull, okay? So then I can add currently open, we have true, let's make one false. I'm doing this wasn't originally part of the exercise but I think is pretty cool. So currently open now we have a ball and then we can use an if here.

[00:05:32]
How if work in templates if you don't know how it works, well, remember, we have the docs. So you go to go.dev, you search for templating. This is in the standards library. You search for template. Then here, I think at one point, you can search for if. See if I can find, it's here, I need to do the search.

[00:06:02]
If template go, it's called if else. It's not a big deal by the way. It is here? No. I think that's the one I opened before. Okay, so here, you can see an example. It's pretty straightforward. If that put that value, if not put that other value, end.

[00:06:24]
So we can actually do something similar here. I can go to a new line and say if., and then I use my property, currently open, that's a Boolean so that's okay. I'm going to set the class as opened. Else, I can create another class, closed and you can add spaces if you want it's not a big deal, that I think it's okay, let me try this, just to see if classes are appearing.

[00:07:03]
So I'm going to refresh. If I inspect this, we have class open, class closed. So from the HTML point of view, it's okay. So now I can go to CSS and change that a little bit. So, I'm going to change the style CSS, and I'm going to add .opened, not sure if all of you are on CSS, .closed, and .opened, well, maybe I can just keep it, I can just change closed, and say that opacity 0.5.

[00:07:37]
Quick question for you. I need to try it now. Do I need to restart my server? I just changed the CSS file. No, I didn't change the server, just the asset. So if I refresh, you can see that I have commonly known is semi-transparent. So it's applying the the class.

[00:08:03]
So that's another way you have to to change the styles, in this case with an if. So far we have a working server-side application, but I wanna highlight something that you might not like. I mean it's not a big deal, it works, it's perfect, but if you see here at the class declaration there are some spaces before and after the class name which when we go to the template can we like change that?

[00:08:33]
Well, I could remove those spaces from here which is okay maybe those where the spaces if I, first I've changed the template, do I need to restart the server or not? That's not so clear as the previous question. Let's see, if I refresh, now it worked. I don't have those spaces.

[00:08:56]
So the answer is no, I don't need to restart the server, the template, but is been accessed at every time you need it. So if you change the template, the server will know that. Anyway, it worked. But yeah, it's kind of I like those spaces to make the code clearer, right?

[00:09:18]
So sometimes you wanna make that you don't want everything to be like within the expressions but I don't want that space in the final output. Well, to solve that, we have a special syntax is a trimming syntax over the double curly brace. It's just a hyphen that you can add on each side of the declaration.

[00:09:45]
Like this, in this case, it's saying that it should remove spaces after or before that declaration. Just that. So then I can keep a lot of spaces here. Even I can send enters as well, like new line. So if I refresh now, I don't have any space in the class but I still have them in my template