我应该使用带有 render 属性的 ui:fragment 来有条件地在带有 JSF 2.2 的 Facelets 中呈现 HTML 标记吗?

Posted

技术标签:

【中文标题】我应该使用带有 render 属性的 ui:fragment 来有条件地在带有 JSF 2.2 的 Facelets 中呈现 HTML 标记吗?【英文标题】:Should I use ui:fragment with the render attribute to conditionally render HTML tags in Facelets with JSF 2.2? 【发布时间】:2017-10-01 10:21:25 【问题描述】:

我正在将一个旧项目从 JSF 1.1 升级到 JSF 2.2。具体来说,我正在将 JSF 实现从 MyFaces 1.1 升级到 MyFaces 2.2.12,用 Facelets 替换 JSP 并升级/替换过时的标记库。我主要使用Migrating from JSF 1.2 to JSF 2.0 作为指导。

该项目在其 JSP 页面中使用了一些名为 htmlib 的标记库,其命名空间为 http://jsftutorials.net/htmLib。我在 jsftutorials 网页和其他地方都找不到关于这个标签库的任何文档,但显然它被用来在 JSP 页面中包含纯 HTML 标签,如 <div><table>

由于现在可以在带有 JSF2 的 XML Facelets 中使用纯 HTML 标签,我现在正在从 htmLib 标签库中删除所有出现的标签,例如 <htm:div>...</htm:div>,并将它们替换为纯 HTML 标签,例如 <div>...</div>

但是,htmLib 中使用的一些标签包含用于条件渲染的render 属性,如下所示:

<htmLib:h4 render="someCondition">
   ...
</htmLib:h4>

因为纯 HTML 标记没有为此目的的 render 属性,所以我正在寻找一种替代方法来有条件地呈现纯 HTML 标记,并偶然发现了这个答案:How to conditionally render plain HTML elements like <div>s?

所以,我的想法是用类似的东西替换上面的结构

<ui:fragment render="someCondition">
   <h4>
      ...
   </h4>
</ui:fragment>

我的问题:

正在使用render 将 HTML 标记包装在 &lt;ui:fragment&gt; 标记中 属性推荐的方式来有条件地呈现 HTML 标签,或者 这种方法是否仅适用于链接问题中的案例并推荐使用? 还有其他方法可以有条件地在 Facelets 中呈现纯 HTML 标记吗? &lt;ui:fragment&gt; 包装方法是否有效,无论其中包含何种纯 HTML? 可以嵌套有条件渲染的&lt;ui:fragment&gt; 块吗?

【问题讨论】:

【参考方案1】:

在这方面没有限制。甚至不用于包装ui:fragment

基本上:

为了只是控制内部内容,没有额外的HTML生成使用 ui:fragment。 要生成额外的 HTML span 元素,请使用 h:panelGroup。 要生成额外的 HTML div 元素,请使用 h:panelGroup layout="block"

您拥有的 HTML 不是问题。 JSF 作为服务器端框架,在服务器中执行所有 HTML 构建/渲染工作,因此 JSF/facelet 标记在发送响应之前被转换为 HTML。您在其中使用的所有纯 HTML 都将保留为 HTML。

但是,从 1.x 迁移时请注意 using tag handlers inside UI Components。标签处理程序(ui:includec:ifc:forEach)评估之前 UI 组件(通常包含rendered 子句)。这一直是 JSF 2 中的冲突来源。

【讨论】:

非常感谢您的回答和解释!那么,我是否正确理解如果我在ui:fragment 内没有标签处理程序(ui:includec:if 等)并且不需要额外的&lt;div&gt;&lt;span&gt; 元素,则包装&lt;ui:fragment rendered="..."&gt; 标签围绕我的纯 HTML 内容确实是要走的路? @scholt 没问题!

以上是关于我应该使用带有 render 属性的 ui:fragment 来有条件地在带有 JSF 2.2 的 Facelets 中呈现 HTML 标记吗?的主要内容,如果未能解决你的问题,请参考以下文章

如果我使用带有 .active 属性的 CSS 模块,我应该在 className 中添加啥

带有 prependId="false" 的 UIForm 中断 <f:ajax render>

Angular / Electron 使用带有角度组件的 renderer.js

Render() 状态元素最初是空的,直到 api 调用

使用带有渲染功能的 Vue.js 3 片段

带有 React-Three-Renderer 的 Sprite 标签(包括 MVCE)