如何有条件地呈现像 <div>s 这样的纯 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8816212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to conditionally render plain HTML elements like <div>s?
提问by Ionut
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 renderedattribute but what about the ones which are not UI Components (for example divs)
我知道所有 UI 组件都可以通过渲染属性呈现，但是那些不是 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>
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.
我知道 div 没有 render 属性，可能我根本没有采用正确的方法。我可以很容易地使用 JSTL 标签，但我想避免这种情况。
回答by BalusC
The right JSF component to represent a HTML <div>element is the <h:panelGroup>with the layoutattribute set to block. So, this should do:
右JSF组件表示一个HTML<div>元素是<h:panelGroup>与layout属性集到block。所以，这应该做：
<h:panelGroup layout="block" ... rendered="#{someCondition}">
...
</h:panelGroup>
Alternatively, wrap it in an <ui:fragment>:
或者，将它包装在一个<ui:fragment>：
<ui:fragment rendered="#{someCondition}">
<div>
...
</div>
</ui:fragment>
Do note that when you'd like to ajax-update a conditionally rendered component, then you should be ajax-updating its parent component instead.
请注意，当您想对有条件渲染的组件进行 ajax 更新时，您应该改为 ajax 更新其父组件。
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?
回答by tuner
This has been easy since JSF 2.2. By using pass-through elements, any HTML element can be converted to a JSF component, which has the rendered attribute.
从 JSF 2.2 开始，这很容易。通过使用传递元素，任何 HTML 元素都可以转换为具有渲染属性的 JSF 组件。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<div class="userDetails" jsf:rendered="#{cc.attrs.value.id != sessionController.authUser.id}">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</div>
</html>
Read more at https://jsflive.wordpress.com/2013/08/08/jsf22-html5/#elements
在https://jsflive.wordpress.com/2013/08/08/jsf22-html5/#elements阅读更多
回答by DRCB
I would just wrap your HTML with <h:panelGroup>
我只想用你的 HTML 包装 <h:panelGroup>
<h:panelGroup rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
<div class = "userDetails">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</div>
</h:panelGroup>
<h:panelGroup rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
<div class = "userDetails">
<h:form>
...
</h:form>
</div>
</h:panelGroup>
Another option is to use components from either Seam (<s:div>) or Tomahawk (<t:htmlTag>) libraries if you already have them in your project.
另一种选择是使用来自 Seam ( <s:div>) 或 Tomahawk ( <t:htmlTag>) 库的组件（如果您的项目中已经有了它们）。
See: http://www.jsftoolbox.com/documentation/seam/09-TagReference/seam-div.html
参见：http: //www.jsftoolbox.com/documentation/seam/09-TagReference/seam-div.html
<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</s:div>
<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
<h:form>
...
</h:form>
</s:div>
Or: http://myfaces.apache.org/tomahawk-project/tomahawk12/tagdoc/t_htmlTag.html
或者：http: //myfaces.apache.org/tomahawk-project/tomahawk12/tagdoc/t_htmlTag.html
<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
Name: #{cc.attrs.value.name}
Details: #{cc.attrs.value.details}
</t:htmlTag>
<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
<h:form>
...
</h:form>
</t:htmlTag>
回答by Pavel Sedek
You could use another composite components. There are no divs or other additional tags, just exactly the one you need. See this example:
您可以使用其他复合组件。没有 div 或其他附加标签，正是您需要的标签。看这个例子：
<table>
<tr>...</tr>
<my:cc rendered="false">
<tr>...</tr>
</my:cc>
<my:cc rendered="true">
<tr>...</tr>
</my:cc>
</table>
And the my:cc component:
还有 my:cc 组件：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://xmlns.jcp.org/jsf/composite">
<cc:interface>
</cc:interface>
<cc:implementation>
<cc:insertChildren />
</cc:implementation>
</html>
Produces following HTML, no additional tags at all, working with ajax.
生成以下 HTML，完全没有附加标签，使用 ajax。
<table><tr>...</tr><tr>...</tr></table>
