循环在Jade（目前称为“Pug”）模板引擎

Question

I want to use a simple loop like for(int i=0; i<10; i++){} .

How do I use it in the Jade engine? I'm working with Node.js and use the expressjs framework.

Answer 1

for example:

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

you may see https://github.com/visionmedia/jade for detailed document.

Answer 2

Using node I have a collection of stuff @stuff and access it like this:

- each stuff in stuffs
  p
    = stuff.sentence

Answer 3

An unusual but pretty way of doing it

Without index :

each _ in Array(5)
  = 'a'

Will print: aaaaa

With index :

each _, i in Array(5)
  = i

Will print: 01234

Notes : In the examples above, I have assigned the val parameter of jade's each iteration syntax to _ because it is required, but will always return undefined .

Answer 4

Here is a very simple jade file that have a loop in it. Jade is very sensitive about white space. After loop definition line ( for ) you should give an indent(tab) to stuff that want to go inside the loop. You can do this without {} :

- 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 5

Just adding another possibility as it might help someone that's trying to both iterate over an array AND maintain a count. For example, the code below goes through an array named items and only displays the first 3 items. Notice that the each and the if are native jade and don't need a hyphen.

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

Answer 6

You could also speed things up with a while loop (see here: http://jsperf.com/javascript-while-vs-for-loops ). Also much more terse and legible IMHO:

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

Answer 7

Pug (renamed from 'Jade') is a templating engine for full stack web app development. It provides a neat and clean syntax for writing HTML and maintains strict whitespace indentation (like Python). It has been implemented with JavaScript APIs. The language mainly supports two iteration constructs: each and while. 'for' can be used instead 'each'. Kindly consult the language reference here:

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

Here is one of my snippets: each/for iteration in pug_screenshot