List Rendering

use y:each, y:endeach, y:for and y:endfor traversal array and object.

y:each

Syntax is y:each="{{ array|object as <index:>item }}". use as define item and index variable name.

Page Data:

{
"data" : {
"pets": [
{
"id":"10283728",
"name":"Cookie",
"type":"cat",
"attrs": {
"weight": 2000,
"height": 20,
"eyes-color": "blue"
}
},{
"id":"21687341",
"name":"Woloo",
"type":"dog",
"attrs": {
"weight": 2600,
"height": 36,
"eyes-color": "black"
}
}
]
}
}

y:each YAOML

<items>
<pet y:each="{{ pets as idx:pet }}" id="{{ pet.id }}" >
<num>{{ idx + 1 }}</num>
<name>{{ pet.name }}</name>
<type y:if="{{ pet.type == 'cat' }}" >CAT</type>
<type y:elif="{{ pet.type == 'dog' }}" >DOG</type>
<attr y:each="{{ pet.attrs as name:value }}" type="{{ name }}" > {{ value }} </attr>
</pet>
<items>

Rendering:

<items>
<pet id="10283728" >
<num>1</num>
<name>Cookie</name>
<type>CAT</type>
<attr type="weight" > 2000 </attr>
<attr type="height" > 20 </attr>
<attr type="eyes-color" > blue </attr>
</pet>
<pet id="21687341" >
<num>2</num>
<name>Woloo</name>
<type>DOG</type>
<attr type="weight" > 2600 </attr>
<attr type="height" > 36 </attr>
<attr type="eyes-color" > black </attr>
</pet>
<items>

y:each Markdown or Text

# Pets
<% y:each="{{ pets as idx:pet }}" %>
## {{ pet.name }}
NUM: {{ idx + 1 }}
<% y:if="{{ pet.type == 'cat' }}" %>
TYPE: CAT
<% y:elif="{{ pet.type == 'dog' }}" %>
TYPE: DOG
<% y:each="{{ pet.attrs as name:value }}" %>
### {{ name }}
{{ value }}
<% y:endeach %>
<% y:endeach %>

Rendering:

# Pets
## Cookie
NUM: 1
TYPE: CAT
### weight
2000
### height
20
### eyes-color
blue
## Woloo
NUM: 2
TYPE: DOG
### weight
2600
### height
36
### eyes-color
black

y:for

Syntax is y:for="{{ i=0; i<10; i++ }}". variable i is counter.

Page Data:

{
"data" : {
"pets": [
{
"id":"10283728",
"name":"Cookie",
"type":"cat",
"attrs": {
"weight": 2000,
"height": 20,
"eyes-color": "blue"
}
},{
"id":"21687341",
"name":"Woloo",
"type":"dog",
"attrs": {
"weight": 2600,
"height": 36,
"eyes-color": "black"
}
}
]
}
}

y:for YAOML

<items>
<pet y:for="{{ i=0; i<2; i++ }}" id="{{ pets[i].id }}" >
<num>{{ i + 1 }}</num>
<name>{{ pets[i].name }}</name>
<type y:if="{{ pets[i].type == 'cat' }}" >CAT</type>
<type y:elif="{{ pets[i].type == 'dog' }}" >DOG</type>
<attr y:each="{{ pets[i].attrs as name:value }}" type="{{ name }}" > {{ value }} </attr>
</pet>
<items>

Rendering:

<items>
<pet id="10283728" >
<num>1</num>
<name>Cookie</name>
<type>CAT</type>
<attr type="weight" > 2000 </attr>
<attr type="height" > 20 </attr>
<attr type="eyes-color" > blue </attr>
</pet>
<pet id="21687341" >
<num>2</num>
<name>Woloo</name>
<type>DOG</type>
<attr type="weight" > 2600 </attr>
<attr type="height" > 36 </attr>
<attr type="eyes-color" > black </attr>
</pet>
<items>

y:for Markdown or Text

# Pets
<% y:for="{{ i=0; i<2; i++ }}" %>
## {{ pets[i].name }}
NUM: {{ i + 1 }}
<% y:if="{{ pets[i].type == 'cat' }}" %>
TYPE: CAT
<% y:elif="{{ pets[i].type == 'dog' }}" %>
TYPE: DOG
<% y:each="{{ pets[i].attrs as name:value }}" %>
### {{ name }}
{{ value }}
<% y:endeach %>
<% y:endeach %>

Rendering:

# Pets
## Cookie
NUM: 1
TYPE: CAT
### weight
2000
### height
20
### eyes-color
blue
## Woloo
NUM: 2
TYPE: DOG
### weight
2600
### height
36
### eyes-color
black

y:endeach & y:endfor

Loop ends tag, used at Markdown or Text type content only.