使用 ui:repeat 和 b:carousel？

Question

环境：

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

我有什么：

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

图像存储在文件系统中，我获得了用于存储模型的 MySQL DB。我试图在我的 web 应用程序的视图上显示图像，一切正常。我还展示了一些来自 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 个固定值以查看它是否正常工作，并识别出该集合的所有图像都存在于轮播中，但是轮播没有正确考虑它们。

我的主要问题：

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

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

如果不是：我必须使用 JSF 实现哪些替代方案，而无需大量的 javascript 等等？

Answer 1

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

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

<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 在评估组件之前执行。从下面的链接：

仅使用 JSTL 标签来控制 JSF 组件树构建的流程。采用 用于控制 HTML 输出生成流程的 JSF UI 组件。不要 将迭代 JSF 组件的 var 绑定到 JSTL 标签属性。做 不依赖 JSTL 标签属性中的 JSF 事件。

或者，忘记 b:carousel 组件，您可以将 JSF 用作单纯的 HTML 生成器，并使用普通 Bootstrap 生成显示轮播所需的 HTML，如 自己动手docs 的部分。

另请参阅：

• JSTL in JSF2 Facelets... makes sense?
• What's the view build time?