我确信有不止一种方法可以做到这一点，但是当另一个 JSF/PrimeFaces 组件发生更改时，有什么好的方法可以更新？
我有一个滑块，可以正确更新输入字段的值（包括支持 bean 中的值）。但该值是一个数字，我想将其显示为文本值，例如如果是 1，我想显示“简单”，如果是 4，显示“困难”。
我通过隐藏存储数值的输入字段来部分工作。然后我添加了另一个“可见”的 outputLabel，它链接到我的支持 bean 中的一个 getter，它将数字转换为文本值。
但我不知道如何说“当隐藏字段的值发生变化时，刷新输出标签中显示的值”。
当然这与 valueChangeListeners 或“更新”属性有关，但很难将它们放在一起。
任何人都可以模糊地指出正确的方向吗？虽然我已经尝试过，但我什至不太确定 Google 会做什么。
谢谢
【问题讨论】：
标签： jsf-2 primefaces
我认为使用基于 PrimeFaces 的解决方案比使用基于 JavaScript 的解决方案要容易得多。 所以，就我而言，我使用了它，它对我有用。
SliderBean：
package ma.klagrida;
import javax.faces.bean.ManagedBean;
import org.primefaces.event.SlideEndEvent;
@ManagedBean
public class SliderBean {
private int number;
private String category = "Start";
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
public void onSlideEnd(SlideEndEvent event) {
int value = event.getValue();
if(value > 0 && value <= 50) {
category = "Easy";
} else if(value > 50 && value <= 100) {
category = "Difficult";
} else {
category = "Start";
}
}
}
索引.xhtml
<!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:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head><title>PrimeFaces Slider</title>
</h:head>
<h:body>
<h:form>
<h:inputText id="number" value="#{sliderBean.number}" />
<p:slider for="number">
<p:ajax event="slideEnd" listener="#{sliderBean.onSlideEnd}" update="category" />
</p:slider>
<h:inputText id="category" value="#{sliderBean.category}" />
</h:form>
</h:body></html>
【讨论】：
使用 Javascript onchange 事件并使用所需的标签更新标签。
或者.. 你可以使用 primefaces onSlideEnd 事件。
valueChangeListeners 会一直到 backing bean，然后返回到客户端
基于此
我有一个滑块，它可以正确更新输入字段 值（包括支持 bean 中的值）。但这个值是 数字，我想将其显示为文本值，例如如果是1，我 要显示“Easy”，如果是 4，则显示“Difficult”。
您只需要一个 JavaScript onchange 事件并更新标签。
这是一个例子（我没有测试它或检查语法，但它应该给你一个想法） 用户第一次进入时，您可以从服务器或客户端初始化标签，就像您为滑块设置默认值一样。
<script>
var labelElement = document.getElementById('output');
var sliderElement = document.getElementById('txt2');
function updateSliderLabel(){
if(sliderElement.value > 75){
labelElement.value = "Large";
} else if(sliderElement.value > 50){
labelElement.value = "Avg";
} else {
labelElement.value = "Small";
}
}
</script>
<h:form id="form">
<h:panelGrid columns="1" style="margin-bottom:10px">
<h:panelGroup>
<h:outputText value="Set ratio to "/>
<h:outputText id="output" value="#{sliderBean.number2}"/>
</h:panelGroup>
<h:inputHidden id="txt2" value="#{sliderBean.number2}" />
<p:slider onSlideEnd="updateSliderLabel()" for="txt2" display="output" style="width:200px" />
</h:panelGrid>
</h:form>
【讨论】：