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