使用 repeat.for 使用迴圈

迴圈遍歷 viewmodel 內部的可迭代或作為可繫結（如果自定義屬性或自定義元素）傳遞可以像這樣完成。

一個字串值陣列

export class MyViewModel {
    myIterable = ['String 1', 'String 2', 'String 3', 'String 4'];
}

<template>
    <div repeat.for="item of myIterable">${item}</div>
</template>

一組物件

export class MyViewModel {
    myIterable = [
        {name: "John Citizen", age: 42},
        {name: "Maxwell Smart", age: 75},
        {name: "Gary TwoShoes", age: 51}
    ];
}

<template>
    <div repeat.for="item of myIterable">
        <strong>Name:</strong> ${item.name}<br>
        <strong>Age:</strong> ${item.age}
    </div>
</template>

一張地圖

export class MyViewModel {
    myIterable = null;

    constructor() {
        this.myIterable = new Map();    
        this.myIterable.set(0, 'My Value');
        this.myIterable.set(1, 'Something Different');
        this.myIterable.set(2, 'Another String #32837');
    }
}

<template>
    <div repeat.for="[id, item] of myIterable">
        ${id}<br>
        ${item}
    </div>
</template>

一個數字迴圈

<template>
    <div repeat.for="i of 10">${i}</div>
</template>