如何使用 ui:repeat 标签在 dataTable 中动态生成 id

我正在使用 ui:repeat 标签来渲染图像。我有五个图像，我希望在每次迭代时我的图像都获得 id，例如 image1、image2、image3...imagen。我尝试过这个，但它不起作用。

<div id="imageGallery">
    <ui:repeat value="#{countryPages_Setup.images}" var="image" varStatus="status">
        <tr>
            <td>
                <a href="javascript:void()" class="launchLink">
                    <p:graphicImage id="image#{status.index}"         //problem
                                    value="/resources/images/#{image}"
                                    width="100"
                                    height="100"
                                    rendered="#{countryPages_Setup.renderImages}"/>
                </a>
            </td>
        </tr>
    </ui:repeat>
</div>

我也尝试过{staus.index + 1}。我也尝试过 id= image#{1++} 但它也不起作用。我该怎么做？

Thanks

您可以在以下位置使用 ELid属性，但它必须在视图构建期间可用。这<ui:repeat>但是在视图渲染期间运行，它将重用相同的<p:graphicImage>生成多个 HTML<img>元素。它不会在视图构建期间运行，因此id遗迹image.

如果你更换<ui:repeat> by <c:forEach>，然后它就会按照你的意图工作。这<c:forEach>在视图构建时运行，它将生成多个<p:graphicImage>然后每个组件仅渲染一次。

<div id="imageGallery">
    <c:forEach items="#{countryPages_Setup.images}" var="image" varStatus="status">
        <tr>
            <td>
                <a href="javascript:void()" class="launchLink">
                    <p:graphicImage id="image#{status.index}"
                                    name="images/#{image}"
                                    width="100"
                                    height="100"
                                    rendered="#{countryPages_Setup.renderImages}"/>
                </a>
            </td>
        </tr>
    </c:forEach>
</div>