如何在一個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>