javascript - node - Loop in Jade(actualmente conocido como "Pug") motor de plantillas

pug node js example

Question

Quiero usar un bucle simple como for(int i=0; i<10; i++){} .

¿Cómo lo uso en el motor de Jade? Estoy trabajando con Node.js y uso el framework expressjs.

Answer 1

Aquí hay un archivo de jade muy simple que tiene un bucle. Jade es muy sensible sobre el espacio en blanco. Después de la línea de definición de bucle ( for ), debe dar una sangría (pestaña) a las cosas que quieran entrar en el bucle. Puedes hacer esto sin {} :

- var arr=[''one'', ''two'', ''three''];
- var s = ''string'';
doctype html
html
    head
    body
        section= s
        - for (var i=0; i<3; i++)
            div= arr[i]

Answer 2

Pug (renombrado de ''Jade'') es un motor de plantillas para el desarrollo de aplicaciones web de pila completa. Proporciona una sintaxis clara y ordenada para escribir HTML y mantiene una estricta sangría de espacio en blanco (como Python). Se ha implementado con API de JavaScript. El lenguaje principalmente admite dos construcciones de iteración: cada y mientras. ''para'' se puede usar en lugar ''cada''. Por favor, consulte la referencia del idioma aquí:

https://pugjs.org/language/iteration.html

Aquí está uno de mis fragmentos: cada uno / para la iteración en pug_screenshot

Answer 3

Simplemente agregando otra posibilidad, ya que podría ayudar a alguien que está tratando de iterar sobre una matriz Y mantener un conteo. Por ejemplo, el siguiente código pasa por una serie de items nombrados y solo muestra los primeros 3 elementos. Tenga en cuenta que each y el if son jade nativo y no necesitan un guión.

ul
  - var count = 0;
  each item in items
    if count < 3
      li= item.name
    - count++;

Answer 4

También podría acelerar las cosas con un ciclo while (consulte aquí: http://jsperf.com/javascript-while-vs-for-loops ). También mucho más breve y legible en mi humilde opinión:

i = 10
while(i--)
    //- iterate here
    div= i

Answer 5

Una forma inusual pero bonita de hacerlo

Sin índice :

each _ in Array(5)
  = ''a''

Se imprimirá: aaaaa

Con índice :

each _, i in Array(5)
  = i

Se imprimirá: 01234

Notas : En los ejemplos anteriores, he asignado el parámetro val de jade a each sintaxis de iteración a _ porque es obligatorio, pero siempre devolverá undefined .

Answer 6

Usando el nodo I tengo una colección de cosas @stuff y @stuff a ella de esta manera:

- each stuff in stuffs
  p
    = stuff.sentence

Answer 7

por ejemplo:

- for (var i = 0; i < 10; ++i) {
  li= array[i]
- }

Puede ver https://github.com/visionmedia/jade para obtener un documento detallado.