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.
Conditional Rendering
Import And Export
Last updated 9 months ago
List Rendering

`y:each`

`y:each` YAOML

`y:each` Markdown or Text

`y:for`

`y:for` YAOML

`y:for` Markdown or Text

`y:endeach` & `y:endfor`
