Primefaces的对话框'appendTo'属性,它有用吗？

PrimeFaces文档在这一点上有点稀疏.appendToBody/ appendTo(在5.0之前)解决(或试图解决)PrimeFaces组件没有得到正确的z-Index的问题,这意味着它不会以其应该的方式出现在其他元素之前或之后.但是,此功能存在问题,因为它可能导致其他问题,如p:commandbutton操作在p:dialog内无效

TL;博士:

不要使用appendTo/ appendToBody.相反,Dialogs(以及ConfirmDialog和OverlayPanel)应始终位于组件层次结构的根,作为其直接后代<h:body>.这将使它们可靠地工作.在那种情况下使用appendTo/ appendToBody是不必要的.

实现此目的的一个好方法是为这些组件("dialogs.xhtml")提供一个(或多个)单独的XHTML文件,然后将其包含在主XHTML文件或模板中(例如使用<ui:include>).另一种解决方案是将a <ui:define>与a结合使用,<ui:insert>如果您希望对话框保留在使用它们的XHTML文件中.

继续阅读详情:-)

问题

一些PrimeFaces组件(如对话框)应显示在其他元素之上.

例如:

如果使用<p:dialog ...modal="true">,并使对话框可见,则会在前景中显示一个对话框,显示在页面的其余部分上方,页面的其余部分由透明层覆盖.例如,您可以在PF Showcase中找到对话框(按钮"Modal").

在幕后,即在页面的DOM中,会发生两件事:

<div>在结尾创建一个新的("模态覆盖")<body>.这个div得到了CSS样式:z-index: 1000; position: absolute; opacity: .30;.这使得它透明并覆盖整个页面,以获得"模态"效果.
对话框本身的(现有的,但不可见的)div是可见的,并获得样式z-index: 1001; position:fixed;.请注意,z-index比模式叠加大一个,因此对话框出现在叠加层上方.

但是,这并不总是有效.其原因是CSS的一个方面称为堆叠上下文.细节有点复杂,但基本上它表示页面元素的z-index仅与同一父元素内的其他元素进行比较.特别是,如果具有较高z-index 的元素包含在具有较低z-index的元素中,则元素可以出现在另一个元素后面,即使它具有更高的z-index.

短(安全)版本是:为了确保z-index按预期工作,所有相关元素应该是DOM中的兄弟.

现在,在这种特殊情况下,模态覆盖必须位于DOM层次结构的顶部(即内部<body>),否则它不能可靠地出现在页面的其余部分之上.但是,对话框本身的div位于DOM的更深处(对应<p:dialog>于源XHTML中标记的位置).现在我们遇到了问题.

实际上,这意味着叠加层可能出现在对话框上方,从而遮挡并阻挡它.同样,如果对话框不是模态的,它可能会出现在页面中的其他元素后面.

关于这个问题的阴险之处在于它取决于页面其余部分的结构(具体来说,页面的其余部分是否使用CSS来创建新的堆叠上下文).所以<p:dialog>最初可能会起作用,然后在其他地方发生变化后突然显示不正确.

'appendTo'如何帮助

如上所述,出现问题是因为为PrimeFaces组件呈现的HTML位于DOM的深处,而它需要是<body>z-index正常工作的直接子代.

当使用appendToBody/时appendTo,PrimeFaces将在呈现的页面中包含Javascript,它只是将PrimeFaces组件的DOM节点移动到末尾<body>(使用JQuery的appendTo函数).这样组件就位于DOM中的正确位置,并且z-index起作用.

使用'appendTo'的问题

虽然DOM重组通过appendTo解决CSS和z-index的问题来执行 ,但它引入了另一个(潜在的)问题:

客户端DOM不再对应于JSF维护的服务器端页面状态(称为视图).

现在,JSF的一个核心功能是它希望客户端HTML/DOM结构与服务器端视图相对应 - 毕竟,JSF从该视图构造了HTML.如果违反了该规则(通常通过操纵DOM客户端),则会遇到各种奇怪的问题,例如JSF忽略提交中的表单字段或值,或者覆盖AJAX更新中的部分修改.

在这种情况下,移动PrimeFaces组件的DOM节点导致的问题包括:

如果PrimeFaces组件是a的一部分<h:form>,它将无法正常工作(因为移动时它不会在<form>标签客户端内).
这是在PrimeFaces文档实际上提到,与解决方法一起:最好不要将组件到一个窗体,把一个形式里面的成分-那么的形式将与组件移动.
如果使用JSF的AJAX功能更新JSF最初呈现PrimeFaces组件的区域,JSF将从DOM中删除要更新的区域,然后再次呈现该组件,因为它不知道它被移动到其他位置.
在旧版本的PrimeFaces中,这导致组件在DOM中出现两次(相同id),这导致后来提交的问题.这是针对PrimeFaces 4.0修复的(问题5636:Dialog appendToBody&dynamic不会删除旧的dom元素),但在5.0中重新出现(问题#367).

这表明这种"操纵JSF背后"的DOM操作风险很大,应该避免 - 因此我建议不要使用appendTo/ appendToBody.

归档时间：	10 年，11 月前
查看次数：	29738 次
最近记录：	8 年前