Loops - metincetin/Karbid GitHub Wiki

For and foreach loops can be used by adding (varName:targetNumberOrArray) next to the element's definition

@button(i:4){
}

This will create 4 buttons. The value can be accessed as this.i

@button(i:4){
    html:"I am number " + this.i
}

For foreach, an array must be entered on the right side

@button(drink:[{name:"Tea",cost:2},{name:"Ayran",cost:2},{name:"Coffee",cost:4},{name:"Water",cost:1}]){
    html:"Order " + this.drink.name + " cost: "+ this.drink.cost
}

Inline elements with loops

Inline elements can be used with loops. You need to specify the loop before the > operator.

@#parent(i:4)>button{
    text:"Four div#parent and a button in each"
}
@#parent>#inner(i:8)>button{
    text:"A div#parent, inside it are eight div#inner and a button in each"
}
@#parent>#inner(i:2)>button(a:3){
    text:"A div#parent, inside it are two div#inner and three buttons in each"
}

Fallbacks

With fallbacks, you can specify a karbid element that will be rendered if the loop does not create any element. Add a "=>" end of the loop and create an element like you normally would.

@button(i:someArray){
    html:"Loop works perfectly"
}=>@button{
    html:"Array is empty. Fallback element is rendered"
}