JSF/PrimeFaces基于单选框选择无服务器往返控制元素显隐方案咨询

实现方案说明 #

你现在基于托管Bean+<p:ajax>的实现是可以正常运行的，但这个方案默认会触发服务器往返请求，如果只是单纯的前端显示隐藏需求，完全不需要用到托管Bean，用纯客户端JS就可以实现无服务器往返的效果，是这个场景下的最优解。

方案1：纯客户端实现（无服务器请求，无需托管Bean）

PrimeFaces默认内置jQuery，你可以直接通过单选框的onchange事件直接操作DOM元素的显示状态，代码如下：

<!-- 初始默认隐藏文本 -->
<h:outputText value="Show some stupid Text." id="testShowText" style="display: none"/>

<p:selectOneRadio id="testRadio" layout="grid" columns="1" 
                  onchange="document.getElementById('testShowText').style.display = this.value === 'True' ? 'block' : 'none'">
    <f:selectItem itemLabel="Show Text" itemValue="True"/>
    <f:selectItem itemLabel="Do NOT show Text" itemValue="False"/>
</p:selectOneRadio>

如果你习惯用jQuery写法，也可以把onchange内容替换为：

$('#testShowText').toggle(this.value === 'True')

方案2：优化后的服务端AJAX实现（适合需要绑定服务端逻辑的场景）

如果你的显示隐藏逻辑需要和其他服务端业务绑定，必须走服务端的话，可以优化你现有的代码，简化冗余逻辑：

1. 无需存储字符串类型的选中值，直接用布尔类型即可，PrimeFaces会自动做类型转换
2. 直接用p:panel的visible属性代替手写display样式，代码更简洁

优化后的托管Bean代码：

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class ShowTextBean {
    private boolean showText = false;

    public boolean isShowText() {
        return showText;
    }

    public void setShowText(boolean showText) {
        this.showText = showText;
    }
}

优化后的Facelets代码：

<p:panel id="testShowTextPanel" visible="#{showTextBean.showText}">
    <h:outputText value="Show some stupid Text." id="testShowText"/>
</p:panel>

<p:selectOneRadio id="testRadio" value="#{showTextBean.showText}" layout="grid" columns="1">
    <f:selectItem itemLabel="Show Text" itemValue="#{true}"/>
    <f:selectItem itemLabel="Do NOT show Text" itemValue="#{false}"/>
    <p:ajax update="testShowTextPanel" process="@this"/>
</p:selectOneRadio>

内容的提问来源于stack exchange，提问作者TheIngo