Skip to main content

​
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:
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()).