1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
extends ../reference.jade
block documentation
h1 Iteration
p Jade supports two primary methods of iteration, #[code each] and #[code while].
h2 each
p.
Jade's first-class iteration syntax makes it easier to iterate over
arrays and objects within a template:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
ul
each val in [1, 2, 3, 4, 5]
li= val
.col-lg-6
+html
:htmlsrc
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
p You can also get the index as you iterate:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
.col-lg-6
+html
:htmlsrc
<ul>
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul>
p Jade also lets you iterate over the keys in an object:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
.col-lg-6
+html
:htmlsrc
<ul>
<li>1: one</li>
<li>2: two</li>
<li>3: three</li>
</ul>
p The object or array to iterate over is just plain JavaScript so it can be a variable or the result of a function call as well.
h2 while
p You can also use #[code while] to create a loop:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
- var n = 0
ul
while n < 4
li= n++
.col-lg-6
+html
:htmlsrc
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
|
