如何在一个ui中遍历两个数组:repeat

Question

我需要在'title'属性中插入值，但我想知道如何做到这一点，它应该是这样的:

<ui:repeat //..>
    <h:graphicImage library="images" name="#{image}" title="#{title}" />
</ui:repeat>

我可以发送一个字符串，用逗号分隔:

<!-- calling the component -->
<cs:small_slider images="products/eletricity.jpg,products/water.jpg" >
<!-- the component with dynamic rendering -->
<cc:interface>
    <cc:attribute name="images" type="java.lang.String" required="true" />
</cc:interface>
<cc:implementation>
    <div id="slider-container">
        <div id="slider-small">
            <ui:repeat value="#{fn:split(cc.attrs.images, ',')}" var="image">
                <h:graphicImage library="images" name="#{image}" />
            </ui:repeat>
        </div>
    </div>
</cc:implementation> 

Answer 1

如果两个数组的相关项具有相同的数组索引，那么您可以通过<ui:repeat>的varStatus可用的其中一个数组的当前循环索引访问它们。

用法:

<cs:small_slider 
    images="products/eletricity.jpg,products/water.jpg" 
    titles="Electicity,Water"
/>

复合组件:

<cc:interface>
    <cc:attribute name="images" type="java.lang.String" required="true" />
    <cc:attribute name="titles" type="java.lang.String" required="true" />
</cc:interface>
<cc:implementation>
    <ui:param name="images" value="#{fn:split(cc.attrs.images, ',')}" />
    <ui:param name="titles" value="#{fn:split(cc.attrs.titles, ',')}" />
    <div id="slider-container">
        <div id="slider-small">
            <ui:repeat value="#{images}" var="image" varStatus="loop">
                <h:graphicImage library="images" name="#{image}" title="#{titles[loop.index]}" />
            </ui:repeat>
        </div>
    </div>
</cc:implementation>