Bucles.
A pesar de que todo lo que vamos a ver se podría hacer a través del código en el archivo de vistas y luego pasarlo a la plantilla a través de una variable {{ ... }}, veremos como utilizarlos mediante instrucciones {% ... %} en el el archivo de plantillas (plantilla_inicial.html).
En el proyecto quiero añadir una lista que voy a utilizar como barra de navegación, por ejemplo. Para ello en el archivo de vistas (inicio.py) agregaré dos cosillas:
1.- Una lista que contendrá los elementos de la barra de navegación:
lista_nav = ['Inicio', 'Pagina_1', 'Acerca_de']
2.- Añadiré al método render_template la variable lista_nav que contendrá los valores de la lista que también se llama lista_nav:
return render_template("plantilla_inicial.html", usuario=nombre, dia=ahora.day,
mes=ahora.month, ano=ahora.year, lista_nav=lista_nav)
Y dentro de plantilla_inicial.html añadiré la barra de navegación de esta forma:
<nav>{{lista_nav}}</nav>
El resultado es el siguiente:
Como se ve la lista se ha insertado correctamente en la página web.
Si quisiéramos que solo se mostrará un elemento en concreto de la lista, por ejemplo 'Pagina_1', usaríamos la metodología del punto y escribiríamos la etiqueta <nav> de la siguiente forma:
<nav>{{lista_nav.1}}</nav>
Recuerda que en Python los elementos de una lista se empiezan a contar desde el 0. El primer elemento es el 0, el segundo el 1....y asi sucesivamente.
Resultando:
Si en vez de una lista, lo que quisiéramos pasar a la plantilla fuera un diccionario, el proceso es muy parecido. En el archivo de vistas construiríamos el diccionario:
diccionario = {'pag0':'Inicio', 'pag1':'Página_1,'pag2':'Acerca_de'}
lo pasaríamos a la plantilla a través del método render_template:
return render_template("plantilla_inicial.html", diccionario=diccionario)
y en nuestra plantilla lo integraríamos como cualquier variable. Para acceder a cualquier elemento del diccionario utilizamos el método del punto junto con la Key del elemento que queramos mostrar.
Pej. si quisiéramos mostrar el valor Página_1 usaríamos la siguiente instrucción:
{{diccionario.pag1}}
Nota: Date cuenta de que la Key va sin comillas de ningún tipo, simplemente se pone después del punto.
Bucles.
Para mostrar los elementos de una lista, aunque se puede hacer de varias formas, podemos usar un bucle for. Los bucles en Flask se consideran una instrucción y se escriben entre {% ... %} y se escriben de una forma muy parecida a los bucles en Python. Por ejemplo nuestra barra de navegación, con todos sus elementos, quedaría de la siguiente forma:
<nav>
{% for i in lista_nav %}
{{i}}
{% endfor %}
</nav>
En la primera linea declaramos el bucle en el formato que nos indica Flask, y le decimos que nos muestre cada elemento en la variable "i" y por último le tenemos que indicar donde finaliza el código del bucle con un {% endfor %}. Esto recorrerá los elementos de la lista y los mostrará seguidos, en horizontal tal como se ve en la imagen a continuación:
Si quisiéramos poner los elementos en vertical se podría hacer con el siguiente código (aunque esto ya es casi mas cosa de html).
<nav>
{% for i in lista_nav %}
<p>{{i}}</p>
{% endfor %}
</nav>
La única diferencia es que hemos metido la variable dentro de un párrafo con lo que en cada vuelta del bucle añade un párrafo y dentro la variable "i" que contiene el elemento que toque.
E incluso podemos crear una lista HTML ordenada o desordenada, según queramos. Por ejemplo, una lista desordenada:
<nav>
{% for i in lista_nav %}
<ul>
<li>{{i}}</li>
</ul>
{% endfor %}
</nav>
Os dejo el código del archivo de vistas y el de la plantilla final:
No hay comentarios:
Publicar un comentario