Programación web dinámica

Plantillas

Una vista no es otra cosa que una plantilla de uso general a la que le podemos inyectar información proveniente de nuestra aplicación de dos maneras:

Plantillas

Una vista no es otra cosa que una plantilla de uso general a la que le podemos inyectar información proveniente de nuestra aplicación de dos maneras:

Plantillas

  • Código almacenado en búfer (buffered code)
p= "Esto es un párrafo"

Una vista no es otra cosa que una plantilla de uso general a la que le podemos inyectar información proveniente de nuestra aplicación de dos maneras:

Plantillas

  • Código almacenado en búfer (buffered code)
p= "Esto es un párrafo"
  • Interpolación de cadenas
p #{parrafo}

Una vista no es otra cosa que una plantilla de uso general a la que le podemos inyectar información proveniente de nuestra aplicación de dos maneras:

Plantillas

  • Código almacenado en búfer (buffered code)
p= "Esto es un párrafo"
  • Interpolación de cadenas
p #{parrafo}

La diferencia fundamental entre ambas es que el código almacenado en búfer proviene de la evaluación de una expresión escrita en JavaScript

Unbuffered code

El código que no se almacena en búfer (unbuffered code) no es otra cosa que la ejecución de lógica escrita en JavaScript dentro de una plantilla

- let unidad = "Cuajimalpa";

p= 'Universidad Autónoma Metroploitana - Unidad ' + unidad

p Universidad Autónoma Metropolitana - Unidad #{unidad}

Iteraciones

Podemos realizar iteraciones de listas o arreglos dentro de las plantillas

- let unidades = ['Azcapotzalco', 'Cuajimalpa', 'Iztapalapa', 'Lerma', 'Xochimilco']

ul
  each unidad in unidades
    li= 'Universidad Autónoma Metropolitana - Unidad ' + unidad

Condicionales

Y también podemos usar condicionales

- let esRegular = true;

if esRegular
  p El estudiante tiene estado regular
else
  p El estudiante no es regular

Layouts

Un layout es un tipo de plantilla especial que se usa, normalmente, para establecer la estructura de una página a través de la herencia de plantillas

doctype html
html(lang="es")
    head
        title Principal
    body
        header
            nav
                ul
                    li 
                        a(href="/") Inicio
                    li
                        a(href="/acerca") Acerca
            h1 Principal
            hr
        block parrafo
        block seccion

views/layouts/pagina.pug

Layouts

Un layout es un tipo de plantilla especial que se usa, normalmente, para establecer la estructura de una página a través de la herencia de plantillas

extends layouts/pagina.pug

block parrafo
    p ¡Hola, mundo!

block seccion
	section
    	p Y aquí va algo, algo...

views/index.pug

Parciales

Una parcial (o inclusión, formalmente hablando), nos permite llamar el contenido de una plantilla dentro de otra

header
	nav
    	ul
        	li
            	a(href="/") Inicio
        	li
            	a(href="/acerca") Acerca
	h1 Principal
	hr

views/partials/header.pug

Parciales

Una parcial (o inclusión, formalmente hablando), nos permite llamar el contenido de una plantilla dentro de otra

doctype html
html(lang="es")
    head
        title Principal
    body
    	include ../partials/header
        block parrafo
        block seccion

views/layouts/pagina.pug

Parciales

Una parcial (o inclusión, formalmente hablando), nos permite llamar el contenido de una plantilla dentro de otra

Algo importante a tener en cuenta es que las parciales comparten el mismo alcance que tiene la plantilla de la que desciende

Mixines

Una mixin es parecido a una parcial, excepto que pueden ser parametrizados para crear contenido dinámico

mixin enlace(href='#', nombre='')
  a(class!=attributes.class href=href)= nombre

views/partials/mixinenlace.pug

Y en la plantilla donde lo vayamos a usar

+enlace('/inicio', 'Inicio')(class="btn")

+enlace('/Salir', 'Salir')(class="btn main")

Y si lo queremos usar en un layout o plantilla

include ../partials/mixinenlace

Programación web dinámica: Plantillas

By Gilberto 🦁

Programación web dinámica: Plantillas

Servidor

  • 30

More from Gilberto 🦁