html - 如何有条件地呈现纯 HTML 元素，如 s？

Question

我正在尝试实现一个复合组件，它要么以纯文本显示用户的详细信息，要么通过可编辑的输入文本字段显示它们(如果所需的详细信息是当前连接的用户的详细信息)。

我知道所有 UI 组件都可以通过 rendered 属性呈现，但是那些不是 UI 组件的(例如 div)呢

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</div>

<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</div>

我知道 div 没有渲染属性，可能我根本没有采取正确的方法。我可以很容易地使用 JSTL 标记，但我想避免这种情况。

Answer 1

代表 HTML 的正确 JSF 组件 <div>元素是 <h:panelGroup>与 layout属性设置为 block .所以，应该这样做:

<h:panelGroup layout="block" ... rendered="#{someCondition}">
    ...
</h:panelGroup>

或者，将其包装在 <ui:fragment> 中:

<ui:fragment rendered="#{someCondition}">
    <div>
        ...
    </div>
</ui:fragment>

或者当您已经在使用 JSF 2.2+ 时，将其设置为 passthrough element :

<div jsf:rendered="#{someCondition}">

</div>

请注意，如果您想对条件渲染的组件进行 ajax 更新，那么您应该改为对它的父组件进行 ajax 更新。

另见:

• Alternative to ui:fragment in JSF
• Conditional rendering of non-JSF components (plain vanilla HTML and template text)
• Ajax update/render does not work on a component which has rendered attribute
• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
• Is it possible to update non-JSF components (plain HTML) with JSF ajax?