Skip to main content

​
1. Overview

YiDA provides loop rendering settings for scenarios that require loop rendering. The loop data must be an array. String arrays, number arrays, and object arrays are all supported.

​
2. Use Cases

​
Scenario 1: Static Loop Data

Define a static array in Loop data. Inside the loop body, use this.item to access the current loop value and this.index to access the current loop index. You can also customize item and index by editing Loop parameters — for example, changing them to content and idx. Enter the loop data in Loop data.
Form editing page. Bind the loop variables in the required settings.
Bind variables. The result is shown below:

​
Scenario 2: Looping Remote Data Sources

Create a remote data source.
Bind the data source to the loop variable:
Then bind the values from the loop variable to the component:
Compared with Scenario 1, this scenario adds two steps: defining a remote data source, and binding the component’s loop data to that data source. The result is shown below:

​
Scenario 3: Nested Loops

Suppose the remote data source returns the following data structure:
You can implement two levels of nested loops, and by extension up to N levels (N < Infinity). When two components work together in a nested loop, wrap them in a container component. Set the outer loop data on the container, and set the inner loop data on the inner component (in this example, the Text component).
Configure the outer layer the same way as in Scenario 2. The key point is how to configure the inner layer:
Note that the outer loop value uses this.item, while the inner one uses this.content. This is intentional (configured by editing the inner Loop parameters) so that the inner layer can still access the outer value. Otherwise, if both used this.item, the inner layer would shadow the outer one. The result is shown below:

​
3. Notes

​
3.1 Using this Inside Loops

Across the entire page builder, this has tiered scopes. The current scope is this, the parent scope is this.$super, and the top-level scope is this.$top. For example, when applying loop rendering to a form container with the form identifier 'fooForm', inside the loop body, use this.$('fooForm').getValue() to get the value of the current loop’s form. To get the values of all looped forms, use this.$super.$('fooForm').map(item => item.getValue()).