Skip to main content

​
1. 概要

YiDAでは、繰り返し表示が必要なシナリオ向けに、ループレンダリング設定を提供しています。 ループデータは配列構造である必要があります。文字列配列、数値配列、オブジェクト配列のいずれにも対応しています。

​
2. ユースケース

​
シナリオ1：静的ループデータ

ループデータに静的な配列を定義します。ループ本体の内部では、this.itemで現在のループ値、this.indexで現在のループインデックスにアクセスできます。ループパラメータを編集することで、item / indexをcontent / idxなどのようにカスタマイズすることも可能です。 ループデータを編集し、ループデータを入力します。 フォーム編集ページ。 必要な設定にループ変数をバインドします。 変数のバインド。 結果は以下のとおりです。

​
シナリオ2：リモートデータソースのループ

リモートデータソースを作成します。 データソースをループ変数にバインドします。 続いて、ループ変数の値をコンポーネントにバインドします。 シナリオ1と比較すると、本シナリオではリモートデータソースの定義と、コンポーネントのループデータをそのデータソースにバインドするという2つの手順が追加されます。 結果は以下のとおりです。

​
シナリオ3：ネストしたループ

リモートデータソースが以下のデータ構造を返すとします。
2階層のネストしたループを実装でき、拡張してN階層（N < Infinity）まで対応可能です。 2つのコンポーネントを組み合わせてネストしたループを適用する場合は、それらをコンテナコンポーネントで包みます。外側のループデータをコンテナコンポーネントに設定し、内側のループデータを内側のコンポーネント（本例ではTextコンポーネント）に設定します。 外側の設定はシナリオ2と同じ方法で行います。ポイントは内側の設定方法です。 お気付きかもしれませんが、外側のループ値はthis.itemを使用しているのに対し、内側ではthis.contentを使用しています。これは意図的な設計であり（内側のループパラメータを編集して設定します）、内側の階層からも外側の値にアクセスできるようにするためです。両方でthis.itemを使用すると、内側の階層が外側を上書きしてしまいます。 結果は以下のとおりです。

​
3. 注意事項

​
3.1 ループ内でのthisの使用

ページビルダー全体を通じて、thisには階層的なスコープがあります。現在のスコープがthis、親スコープがthis.$super、最上位のスコープがthis.$topです。 たとえば、フォーム識別子が'fooForm'のフォームコンテナにループレンダリングを適用する場合、ループ本体の内部でthis.$('fooForm').getValue()を使用すると、現在のループのフォームの値を取得できます。ループされたすべてのフォームの値を取得するには、this.$super.$('fooForm').map(item => item.getValue())を使用します。