如何有条件地呈现像 <div>s 这样的纯 HTML 元素? [英] How to conditionally render plain HTML elements like <div>s?

问题描述

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

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

名称:#{cc.attrs.value.name}详细信息:#{cc.attrs.value.details}
<div 类 = "userDetails" 渲染 = "#{cc.attrs.value.id == sessionController.authUser.id}"><h:形式>...</h:form>

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

解决方案

表示 HTML

元素的正确 JSF 组件是 code> 并且 layout 属性设置为 block.所以，应该这样做:

...</h:panelGroup>

或者，将其包装在 中:

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

</ui:fragment>

或者当您已经使用 JSF 2.2+ 时，将其设为 passthrough 元素:

请注意，当您想对有条件渲染的组件进行 ajax 更新时，您应该改为对它的父组件进行 ajax 更新.

另见:

• JSF 中 ui:fragment 的替代方案
• 非条件渲染-JSF 组件(普通 HTML 和模板文本)
• Ajax 更新/render 不适用于具有 render 属性的组件
• 为什么我需要嵌套一个带有渲染=#{some}"的组件?在另一个组件中，当我想对其进行 ajax 更新时?
• 是吗可以使用 JSF ajax 更新非 JSF 组件(纯 HTML)吗?

I'm trying to implement a composite component which either displays the information details of a user in plain text or displays them through editable input texts fields if the desired details are those of the user currently connected.

I know that al UI Components can be rendered via the rendered attribute but what about the ones which are not UI Components (for example divs)

<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>

I know that the div doesn't have the rendered attribute and probably I'm not taknig the right approach at all. I could very easily use an JSTL tag but I want to avoid that.

解决方案

The right JSF component to represent a HTML <div> element is the <h:panelGroup> with the layout attribute set to block. So, this should do:

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

Alternatively, wrap it in an <ui:fragment>:

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

Or when you're already on JSF 2.2+, make it a passthrough element:

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

</div>

Do note that when you'd like to ajax-update a conditionally rendered component, then you should be ajax-updating its parent component instead.

See also:

• 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?

这篇关于如何有条件地呈现像 <div>s 这样的纯 HTML 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！