使用ui：repeat和b：carousel？ [英] Use ui:repeat with b:carousel?
问题描述
环境：
我正在与JSF2.2，Bootsfaces 0.9.1，Primefaces 6.0，JEE7和Hibernate 5.2结合使用使用MySQL 5.7 DB。
I'm working with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.
我所拥有的：
我有具有一组图像的模型。该集合包含我的自定义Image类的实例，该类保存该Image的值，例如标题，描述和文件名。
I've got a model which has a set of images. The set contains instances of my custom Image class which holds values for the Image like a title, description and the filename.
这些图像存储在文件系统中， MySQL DB用于存储模型。我试图在Web应用程序的视图上显示图像，但一切正常。我还显示了一些靴子上带有b：carousel标签的图像，一切都按我的预期进行。
The images are stored on the filesystem and I got the MySQL DB for storing the models. I tried to display images on a view in my webapp and everything works fine. I also displayed some images with b:carousel tag from bootsfaces and everthing worked like I expected.
我尝试做的事情：
我尝试的下一步是用于显示一组不同尺寸的图像。以下代码是我尝试实现的代码：
The next step I tried was to use for displaying a set of images with a different size. The following code was my attempt to realize this:
<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个固定值，以查看其是否正常工作，并确认该轮播中存在该集合的所有图像，但是该轮播并未正确考虑它们。
I recognized that no images got displayed in my carousel. Then I added at least 1 fixed to see if it's working and recognized that all images of the set are present in the carousel however the carousel doesn't take them into account correctly.
我的主要问题：
是否可以使用ui：repeat标签填充轮播？
Is it possible to use the ui:repeat tag to populate a carousel?
如果可能的话：我该怎么做？我在这里做错了什么？
If it's possible: How can I do that? What am I doing wrong here?
如果不是这样的话：我必须使用哪些替代方法使用JSF来实现此功能，而无需使用大量的javascript和
If it's not: Which alternatives do I have to realize this with JSF and without a lot of javascript and so on?
推荐答案
基本上， b：carousel 组件期望静态项目，但 ui：repeat 会动态显示它们。解决方案是将 b：carouselItems 的生成转移到JSF生命周期的早期阶段。
Basically, the b:carousel component expects static items, but ui:repeat renders them dynamically. The solution is to shift the generation of the b:carouselItems to an early JSF lifecycle phase.
JSF执行其生命周期分阶段进行，最后一个是负责呈现响应的生命周期（在下面的链接中对此进行了很好的解释）。这里的关键点是您仍然可以使用JSTL，它是一个标记处理程序而不是一个组件，并且在视图构建时执行。因此，基本上，将您的 ui：repeat 替换为 c：forEach 应该可以解决您的问题：
JSF performs its lifecycle in phases and the one taking care of rendering the response is the last one (it's pretty well explained in the links below). The key point here is that you could still use JSTL, which is a tag handler and not a component and performs at view build time. So, basically, replacing your ui:repeat by c:forEach should solve your issue:
<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中遇到 PARTIAL_STATE_SAVING 的麻烦JSF版本（2.1.18及更早版本），但现在不再。无论如何，在评估组件之前，请始终牢记JSTL的行为。从下面的链接：
This trick used to bring developers into trouble with the PARTIAL_STATE_SAVING in older Mojarra JSF versions (2.1.18 and previous), but not anymore. Anyway, always keep in mind JSTL acts before components are evaluated. From the link below:
仅使用JSTL标记来控制JSF组件树构建的流程。使用
JSF UI组件来控制HTML输出生成的流程。不要
将迭代的JSF组件的var绑定到JSTL标记属性。
不要依赖JSTL标记属性中的JSF事件。
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生成器，并使用普通的Bootstrap生成所需的HTML以显示旋转木马，如 Do中所述文档。
Alternatively, forgetting about the b:carousel component, you could use JSF as a mere HTML generator and generate the required HTML to display a carousel using plain Bootstrap, as it is explained in the Do it yourself section of the docs.
另请参见：
- JSTL in JSF2 Facelets... makes sense?
- What's the view build time?
这篇关于使用ui：repeat和b：carousel？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
