Primefaces 时间线在更新时闪烁答案

【问题标题】：Primefaces timeline blink on updatePrimefaces 时间线在更新时闪烁
【发布时间】：2021-03-18 15:45:01
【问题描述】：

Primefaces 时间线在更新时闪烁。这是非常不美观的旧版本在更新时没有闪烁。如果你点击 primefaces 展示中的按钮，你可以看到它的样子：

https://www.primefaces.org/showcase/ui/data/timeline/editServer.xhtml?jfwid=0a833

        <p:timeline id="timeline" value="#{editServerTimelineView.model}" var="booking"
                zoomMax="#{editServerTimelineView.zoomMax}"
                start="#{editServerTimelineView.start}"
                end="#{editServerTimelineView.end}"
                editable="true" editableTime="#{editServerTimelineView.editableTime}"
                widgetVar="timelineWdgt">


        <p:commandButton value="Toggle TimeChangeable" process="@this" update="timeline" 
                     action="#{editServerTimelineView.toggleEditableTime}"/>

每次更新时间线时都会发生同样的事情。

你知道如何防止时间线闪烁吗？

【问题讨论】：

嗯，这很可能是为了将时间线升级到更新版本的插件。
这个例子也有这个方面，它应该向你展示它的加载<f:facet name="loading"> <i class="pi pi-spin pi-spinner" style="font-size: 3em"></i> </f:facet>，但它似乎没有这样做。

标签： jsf primefaces

【解决方案1】：

在我的情况下，更新闪烁发生在延迟加载和新项目中。这是可能的，而且不是因为做更多的工作。这是一个设计决策，是 dom 对象中可见性的变化，在加载 loadingScreen 之前在 js 中渲染组件时，您可以看到：

p.dom.root.style.visibility = "hidden";

monkey 修补timeline.js 并更改为

p.dom.root.style.visibility = "visible";

问题消失了。

【讨论】：

你能详细说明你是如何改变它的吗？是不是直接改了primefaces包里的timeline.js？
我猴子修补了timeline.js。也就是说，我从包中提取timeline.js，将其解压缩并加载到我的Web应用程序中，无论我在xhtml中使用时间线的任何地方，我都会从我的服务器导入de修改过的js：<script type="text/javascript" src="#{request.contextPath}/js/timeline/timeline.js"></script><code/

【解决方案2】：

是的，新的时间线在渲染时会做更多的工作，并且有很多新功能，但这是一个副作用。他们提供加载屏幕模板，让您的用户知道它的加载方式......

<f:facet name="loading">
   <h1>Loading please wait...</h1>
</f:facet>

【讨论】：

所以无法避免。也是一个答案。