Question

环境：

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

我有什么：

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

图像存储在文件系统中，我得到了用于存储模型的MySQL DB。我试图在我的webapp上的视图上显示图像，一切正常。我还展示了一些带有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，它是一个标记处理程序而不是一个组件，并在视图构建时执行。因此，基本上，将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行为。从以下链接：

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

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

另见：

使用ui：重复b：carousel？

1 个答案: