将 ui:repeat 与 b:carousel 一起使用？

Question

环境：

我正在使用 JSF2.2、Bootsfaces 0.9.1、Primefaces 6.0、JEE7 和 Hibernate 5.2 以及 MySQL 5.7 DB。

我有：

我有一个包含一组图像的模型。该集合包含我的自定义图像 class 的实例，它包含图像的值，如标题、描述和文件名。

图像存储在文件系统中，我得到了 MySQL 数据库来存储模型。我试图在我的网络应用程序的视图上显示图像，一切正常。我还展示了一些来自 bootsfaces 的带有 b:carousel 标签的图片，一切都如我所料。

我尝试做的事情：

我尝试的下一步是用于显示一组不同尺寸的图像。以下代码是我试图实现这一点的尝试：

<b:carousel id="carousel" style="width: 800px; height: 400px;">
    <ui:repeat value="#{modelDetailBean.modelImages}" var="img">
         <b:carouselItem>
              <b:image value="#{modelDetailBean.getImage(img)}"/>
         </b:carouselItem>
    </ui:repeat>
</b:carousel>

我发现我的轮播中没有显示任何图像。然后我添加了至少 1 个 fixed 以查看它是否正常工作并识别出该组的所有图像都存在于轮播中但是轮播没有正确考虑它们。

我的主要问题：

是否可以使用 ui:repeat 标签填充轮播？

如果可能：我该怎么做？我在这里做错了什么？

如果不是：我必须使用 JSF 实现这一点并且没有很多 javascript 等等？

Answer 1

基本上，b:carousel 组件需要静态项，但 ui:repeat 会动态呈现它们。解决方案是将 b:carouselItems 的生成转移到早期的 JSF 生命周期阶段。

JSF 分阶段执行其生命周期，负责呈现响应的是最后一个（在下面的 link 中有很好的解释）。这里的关键点是您仍然可以使用 JSTL，它是一个标记处理程序而不是一个组件，并在视图构建时执行。因此，基本上，将 ui:repeat 替换为 c:forEach 应该可以解决您的问题：

<b:carousel id="carousel" style="width: 800px; height: 400px;">
    <c:forEach items="#{modelDetailBean.modelImages}" var="img">
         <b:carouselItem>
              <b:image value="#{modelDetailBean.getImage(img)}"/>
         </b:carouselItem>
    </c:forEach>
</b:carousel>

这个技巧曾经让开发人员在旧的 Mojarra JSF 版本（2.1.18 和更早版本）中遇到 PARTIAL_STATE_SAVING 的麻烦，但现在不会了。无论如何，请始终牢记 JSTL 在评估组件之前执行操作。来自下面的link：

Use JSTL tags only to control flow of JSF component tree building. Use JSF UI components to control flow of HTML output generation. Do not bind the var of iterating JSF components to JSTL tag attributes. Do not rely on JSF events in JSTL tag attributes.

或者，忘记 b:carousel 组件，您可以将 JSF 仅用作 HTML 生成器并生成所需的 HTML使用普通 Bootstrap 显示旋转木马，如 docs.

的 自己动手 部分中所述

另请参阅：

JSTL in JSF2 Facelets... makes sense?

将 ui:repeat 与 b:carousel 一起使用？

Use ui:repeat with b:carousel?

jsf

carousel

uirepeat

bootsfaces