Use ui:repeat with b:carousel?

Question

环境：

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

我所拥有的：

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

图像存储在文件系统中，我得到了用于存储模型的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个固定的，看看它是否有效，并认识到该集的所有图像都存在于旋转木马中，但旋转木马没有正确考虑它们。

我的主要问题：

是否可以使用ui:repeat标记来填充转盘？

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

如果不是：在没有大量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组件树构建的流程。使用JSF UI组件控制HTML输出流的生成。不要将迭代JSF组件的var绑定到JSTL标记属性。做不依赖于JSTL标记属性中的JSF事件。

或者忘记b:carousel组件，您可以将JSF仅用作HTML生成器，并使用纯Bootstrap生成显示转盘所需的HTML，如文档的Do it yourself部分所述。

另请参阅：

• JSF2 Facelets中的JSTL。。。有道理吗
• 什么'；视图构建时间是多少