2

El siguiente código en Jade me crea 3 divs similares, con distintos h1(HTML, CSS, Javascript). Lo que no puedo conseguir es agregarle contenido distinto para cada h2 y cada p. ¿Alguna idea? gracias.

.Blog
  each title in ['HTML', 'CSS', 'Javascript']
    include ../article/template.jade

El article/template.jade sería:

.Article
  h1=title
  h2
  p 

Para hacer este código me he basado en las referencias de iteración en el sitio de jade

1 respuesta 1

1

Para lo que estas haciendo te recomiendo que uses un mixin en lugar de un include. Ambos funcionan de manera similar pero el mixin es un bloque reutilizable y te permite pasar variables al bloque de html que intentas crear por lo que su funcionamiento será obvio y funciona a la perfección con las variables de los iteradores.

mixin article(art)
    .Article
        h1=art.title
        h2=art.subtitle
        p=art.content

.Blog
    each art in [{title: 'HTML', subtitle: 'Core', content: 'Lorem ipsum'}]
        +article(art)

Los datos sobre los que iteras deben ser un arreglo de objetos en lugar de un arreglo de string para que puedas tener acceso en el ciclo al contenido adicional que que intentas agregar.

1
  • Gracias @devconcept!! me ha funcionado. Al final el código del ejemplo quedaría así: .Blog each art in [{title: 'HTML', subtitle: 'Core', content: 'Lorem ipsum'},{title: 'CSS', subtitle: 'CoreCSS', content: 'LoremCSS'},{title: 'Javascript', subtitle: 'CoreJS', content: 'LoremJS'}] +article(art) . En tu código después de 'Core' va una "," en vez de ":" . Intenté editarlo pero no me permitieron por no llegar a los 6 caracteres. Muchas gracias por tu ayuda.
    – agujex
    Commented el 10 feb. 2016 a las 16:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.