> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Perulangan render

> Pelajari cara menggunakan fitur perulangan render YiDA, mencakup data perulangan statis, perulangan sumber data jarak jauh, serta skenario dan metode konfigurasi perulangan bersarang.

| **Fitur**      | **Edisi Luang** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| -------------- | --------------- | --------------- | ---------------------- | ------------------- |
| Halaman kustom | Tidak didukung  | Tidak didukung  | Didukung               | Didukung            |

## 1. Gambaran umum

YiDA menyediakan pengaturan perulangan render untuk skenario yang memerlukan perulangan render.

Data perulangan harus berupa struktur array. Array string, array angka, dan array object semuanya didukung.

## 2. Kasus penggunaan

### Skenario 1: Data perulangan statis

Definisikan sebuah array statis di **Loop data**. Di dalam badan perulangan, gunakan `this.item` untuk mengakses nilai perulangan saat ini dan `this.index` untuk mengakses indeksnya. Anda juga dapat mengustomisasi `item` / `index` dengan mengedit **Loop parameters** — misalnya, menjadi `content` / `idx`.

Edit dan masukkan data perulangan di **Loop data**.

Halaman edit formulir.

Ikat variabel perulangan pada pengaturan yang diperlukan.

Ikat variabel.

Hasilnya ditampilkan di bawah ini:

### Skenario 2: Perulangan pada sumber data jarak jauh

Buat sebuah sumber data jarak jauh.

Ikat sumber data tersebut ke variabel perulangan:

Kemudian ikat nilai variabel perulangan ke komponen:

Dibandingkan dengan Skenario 1, skenario ini menambahkan dua langkah: mendefinisikan sumber data jarak jauh, dan mengikat data perulangan komponen ke sumber data tersebut.

Hasilnya ditampilkan di bawah ini:

### Skenario 3: Perulangan bersarang

Misalkan sumber data jarak jauh mengembalikan struktur data berikut:

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
[
  {
    type: 'Saya adalah judul satu',
    detail: [
      'Konten satu',
      'Konten dua',
      'Konten tiga'
    ]
	},
  {
    type: 'Saya adalah judul satu',
    detail: [
      'Konten satu',
      'Konten dua',
      'Konten tiga'
    ]
	},
  ...
]
```

Anda dapat mengimplementasikan perulangan bersarang dua tingkat; secara analogi, tingkat N (N \< Infinity) juga didukung.

Saat dua komponen bekerja sama untuk menerapkan perulangan bersarang, bungkus keduanya dalam sebuah komponen kontainer. Atur data perulangan luar pada komponen kontainer, dan atur data perulangan dalam pada komponen di dalamnya (dalam contoh ini, komponen Teks).

Konfigurasikan lapisan luar dengan cara yang sama seperti pada Skenario 2. Poin pentingnya adalah cara mengonfigurasi lapisan dalam:

Perhatikan bahwa nilai perulangan luar menggunakan `this.item`, sedangkan nilai perulangan dalam menggunakan `this.content`. Hal ini disengaja — dikonfigurasi dengan mengedit **Loop parameters** pada lapisan dalam — agar lapisan dalam tetap dapat mengakses nilai lapisan luar. Jika keduanya menggunakan `this.item`, lapisan dalam akan menutupi lapisan luar.

Hasilnya ditampilkan di bawah ini:

## 3. Catatan

### 3.1 Menggunakan `this` di dalam perulangan

Di seluruh page builder, `this` memiliki cakupan bertingkat. Cakupan saat ini adalah `this`, cakupan induk adalah `this.$super`, dan cakupan tingkat teratas adalah `this.$top`.

Misalnya, saat menerapkan perulangan render pada kontainer formulir dengan pengidentifikasi `'fooForm'`, gunakan `this.$('fooForm').getValue()` di dalam **badan perulangan** untuk mendapatkan nilai formulir pada iterasi saat ini. Untuk mendapatkan nilai semua formulir yang di-loop, gunakan `this.$super.$('fooForm').map(item => item.getValue())`.