title: How to loop through AEM multifield component when each field has multiple values
body: <p>I've created a custom multifield component (titled "breadcrumbs") that will be used as a page's breadcrumbs nav. Each multifield item consists of a textfield and a pathbrowser. I want to list out each multifield item as an anchor tag with the "text" property as the text and the "link" property as the href.</p>
  
  <p>right now, i just have my html listing out the properties as follows:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;${properties.text}&lt;/p&gt;
      &lt;p&gt;${properties.link}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which outputs this to the page:</p>
  
  <pre><code>text 1,text 2
  
  link 1,link 2
  </code></pre>
  
  <p>I know how to use data-sly-list and data-sly-repeat for each of the properties to get a list of all the texts and links like this:</p>
  
  <pre><code>&lt;ul data-sly-list="${properties.text}"&gt;
      &lt;li&gt;&lt;p&gt;${items}&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul data-sly-list="${properties.link}"&gt;
      &lt;li&gt;&lt;p&gt;${items}&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but is there a way to list out both properties into one element that would look something like this:</p>
  
  <pre><code>&lt;ul data-sly-repeat.breadcrumbs="${properties}"&gt;
      &lt;li&gt;
          &lt;a href="${breadcrumbs.text}"&gt;
              ${breadcrumbs.link}
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have also tried data-sly-use with a custom js file, but also can't get multiple properties to loop in one element.</p>