如何在一个 ui:repeat 中迭代两个数组？

Question

我需要在“标题”属性中插入值，但我想知道如何做到这一点，它应该是这样的：

<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

如果两个数组的相关项具有相同的数组索引，那么您可以通过其中一个数组的当前循环索引来访问它们，该索引可通过 获得：重复>。

用途：

<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>