根据 <h:outputText> 的值有条件地渲染 <div>答案

【问题标题】：Conditionally render a <div> based on value of <h:outputText>根据 <h:outputText> 的值有条件地渲染 <div>
【发布时间】：2015-06-28 05:41:35
【问题描述】：

我正在使用 jsf primefaces。我想根据特定输出文本的值显示图像。如果文本值为 'Alarm *'，则会出现一个带有特殊图像的 div。如果值为 'Alarm **'，则会出现一个带有其他图像的 div，等等。我尝试了下面的代码，但它对我不起作用。

<h:outputText id="alarmCriticalityValue" value="#{msg[summary.criticality.key]}" />

<c:if test="#{alarmCriticalityValue=='Alarm *'}">
   <div class="alarm1"></div>
</c:if>

我应该如何实现这个想法？

【问题讨论】：

尝试使用渲染属性。

标签： jsf conditional-rendering

【解决方案1】：

您需要使用binding 属性将UIComponent 实例置于EL 范围内。 id 属性并没有这样做，这与您的预期相反。

<h:outputText binding="#{alarmCriticality}" ... />

然后你需要使用UIOutput#getValue()来获取它的value属性。

<c:if test="#{alarmCriticality.value == 'Alarm *'}">

也就是说，您最好在此处使用rendered 属性，特别是如果#{summary} 表示JSF 迭代组件的当前迭代项，例如<ui:repeat> 或<h:dataTable>。

<h:panelGroup layout="block" styleClass="alarm1"
    rendered="#{alarmCriticality.value == 'Alarm *'}" />

另见：

与具体问题无关。看到条件渲染依赖于本地化文本很奇怪。如果您更改语言环境和/或本地化文本怎么办？这是非常脆弱的。您最好检查一下捆绑密钥。

<h:outputText value="#{msg[summary.criticality.key]}" />
<h:panelGroup layout="block" styleClass="alarm1" 
    rendered="#{summary.criticality.key == 'some.alarm.key'}" />

这样你也不需要再绑定输出文本了。

【讨论】：

【解决方案2】：

试试

<c:if test="#{msg[summary.criticality.key].equals('Alarm *')}">

或将binding 添加到h:outputText 并检查。

【讨论】：

【解决方案3】：

试试这个

<h:outputText id="alarmCriticalityValue" value="#{msg[summary.criticality.key]}" />
    <h:panelGroup layout="block" styleClass="alarm1" rendered="#{alarmCriticality.value eq 'Alarm *'}" />

【讨论】：