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

韦伯

环境:

我正在将JSF2.2,Bootsfaces 0.9.1,Primefaces 6.0,JEE7和Hibernate 5.2与MySQL 5.7 DB结合使用。

是)我有的:

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

图像存储在文件系统中,我获得了用于存储模型的MySQL DB。我试图在Web应用程序的视图上显示图像,但一切正常。我还从靴子表面显示了一些带有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等实现哪些替代方法?

Xtreme骑自行车的人

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

JSF分阶段执行其生命周期,最后一个是负责呈现响应的生命周期(在下面的链接中对此进行了很好的解释)。这里的关键点是您仍然可以使用JSTL,它是一个标记处理程序,而不是一个组件,并且在视图构建时执行。所以,基本上,免去您ui:repeatc: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生成器,并使用纯Bootstrap生成所需的HTML以显示转盘,如docs的“自己动手”部分中所述

也可以看看:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

将ng-repeat与Include模板一起使用

来自分类Dev

Owl-Carousel无法与AngularJs ng-repeat一起使用

来自分类Dev

将ui-router与视图转换一起使用

来自分类Dev

将Django注册与Flat UI模板一起使用

来自分类Dev

将MPMoviePlayerController UI与LibVLC一起使用

来自分类Dev

如何在Angular-UI模式中将ng-repeat与Div一起使用

来自分类Dev

为什么<ui:repeat>不能与java.util.Iterator一起使用?

来自分类Dev

Owl-Carousel无法与Rails一起使用

来自分类Dev

将ng-repeat与bootstrap navbar元素一起使用

来自分类Dev

角度:将精灵表与ng-repeat一起使用

来自分类Dev

如何将ng-repeat与filter和$ index一起使用?

来自分类Dev

将ng-repeat与角度滤镜模块一起使用

来自分类Dev

将Json文件存储在AngularJS变量中以与'ng-repeat'一起使用

来自分类Dev

将ng-init与ng-repeat一起使用时会覆盖

来自分类Dev

如何将组件与ng-repeat一起使用?

来自分类Dev

将Json文件存储在AngularJS变量中以与'ng-repeat'一起使用

来自分类Dev

将ng-repeat与角度滤镜模块一起使用

来自分类Dev

如何将组件与ng-repeat一起使用?

来自分类Dev

SPSS:当每种情况具有多个链接的实例时,将IF函数与REPEAT一起使用

来自分类Dev

无法将 ng-if 与 ng-repeat $ index 一起使用

来自分类Dev

将ng-repeat元素分组在一起

来自分类Dev

将ng-repeat元素分组在一起

来自分类Dev

将ng-repeat-start和ng-repeat-end与嵌套中继器一起使用

来自分类Dev

将Reactive UI与另一个MVVM框架一起使用

来自分类Dev

我正在将Angular与UI-Router一起使用,无法使用多个视图

来自分类Dev

我正在将Angular与UI-Router一起使用,无法使用多个视图

来自分类Dev

将“ -Filter”与变量一起使用

来自分类Dev

将PowerMock与黄瓜一起使用

Related 相关文章

  1. 1

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

  2. 2

    将ng-repeat与Include模板一起使用

  3. 3

    Owl-Carousel无法与AngularJs ng-repeat一起使用

  4. 4

    将ui-router与视图转换一起使用

  5. 5

    将Django注册与Flat UI模板一起使用

  6. 6

    将MPMoviePlayerController UI与LibVLC一起使用

  7. 7

    如何在Angular-UI模式中将ng-repeat与Div一起使用

  8. 8

    为什么<ui:repeat>不能与java.util.Iterator一起使用?

  9. 9

    Owl-Carousel无法与Rails一起使用

  10. 10

    将ng-repeat与bootstrap navbar元素一起使用

  11. 11

    角度:将精灵表与ng-repeat一起使用

  12. 12

    如何将ng-repeat与filter和$ index一起使用?

  13. 13

    将ng-repeat与角度滤镜模块一起使用

  14. 14

    将Json文件存储在AngularJS变量中以与'ng-repeat'一起使用

  15. 15

    将ng-init与ng-repeat一起使用时会覆盖

  16. 16

    如何将组件与ng-repeat一起使用?

  17. 17

    将Json文件存储在AngularJS变量中以与'ng-repeat'一起使用

  18. 18

    将ng-repeat与角度滤镜模块一起使用

  19. 19

    如何将组件与ng-repeat一起使用?

  20. 20

    SPSS:当每种情况具有多个链接的实例时,将IF函数与REPEAT一起使用

  21. 21

    无法将 ng-if 与 ng-repeat $ index 一起使用

  22. 22

    将ng-repeat元素分组在一起

  23. 23

    将ng-repeat元素分组在一起

  24. 24

    将ng-repeat-start和ng-repeat-end与嵌套中继器一起使用

  25. 25

    将Reactive UI与另一个MVVM框架一起使用

  26. 26

    我正在将Angular与UI-Router一起使用,无法使用多个视图

  27. 27

    我正在将Angular与UI-Router一起使用,无法使用多个视图

  28. 28

    将“ -Filter”与变量一起使用

  29. 29

    将PowerMock与黄瓜一起使用

热门标签

归档