各フィールドに複数の値があるときにAEMマルチフィールドコンポーネントをループする方法

Question

ページのパンくずリストとして使用されるカスタムマルチフィールドコンポーネント（「ブレッドクラム」というタイトル）を作成しました。各マルチフィールドアイテムは、テキストフィールドとパスブラウザーで構成されます。テキストとしての "text"プロパティとhrefとしての "link"プロパティを持つアンカータグとして各マルチフィールド項目をリストしたいと思います。

今、私はちょうど次のように私のhtmlプロパティを一覧表示があります。

<div> 
    <p>${properties.text}</p> 
    <p>${properties.link}</p> 
</div> 

ページにこれを出力する：

text 1,text 2 

link 1,link 2 

私はデータ-SLY-リストを使用する方法を知っています各プロパティのdata-sly-repeatを使用して、次のようなすべてのテキストとリンクのリストを取得します。

しかし、このようになります一つの要素に両方のプロパティを一覧表示する方法があります：私はまた、カスタムのjsファイルとデータ-SLY-使用を試してみましたが、また、複数取得することはできません

<ul data-sly-repeat.breadcrumbs="${properties}"> 
    <li> 
     <a href="${breadcrumbs.text}"> 
      ${breadcrumbs.link} 
     </a> 
    </li> 
</ul> 

は、プロパティを1つの要素にループします。

Answer 1

フィールドをJSONまたはACS multifieldのようなノードとして格納するマルチフィールドを使用することを強くお勧めします。目的に合わせてより良いデータ構造を得ることができます。 linkとtextの両方が同じ長さで、正しい順序で使用されることを100％保証していない限り、私は以下の解決策を推奨しません。

<ul data-sly-list.textItem="${properties.text}"> 
    <li> 
     <a data-sly-attribute.href="${properties.link[textItemList.index]}"> 
      ${textItem} 
     </a> 
    </li> 
</ul> 

これが印刷されます：テキストとリンクはここに、それぞれ複数値プロパティと仮定すると、あなたが何ができるかである、と述べた

ul> 
    <li> 
     <a title-href="link1"> 

     </a> 
    </li> 

    <li> 
     <a title-href="link2"> 

     </a> 
    </li> 
</ul> 

をdata-sly-listためのVAR名いるので、カスタム識別子textItemListが作成されます。私たちは、textItemListのメンバーindexに興味があり、実行してlinkで同じインデックスにある項目を表示するためにそれを使用：properties.link[textItemList.index]

をノート*

data-sly-list in the specについて詳しく読む：あなたも data-sly-repeat

でこれを行うことができます