javascript - 如何通过 ajax 刷新由 JSF 填充的 javascript 变量？

Question

我想做以下事情:

1. 从 h:selectOneMenu 中选择一个项目
2. 通过 ajax 使用新值更新支持 bean
3. 使用新值运行 Javascript 函数

虽然在下面的代码中，alert(#{backingBean.derivedValue}) 仍然包含上次更改的值(即当我选择“二”时它是 0，当我选择“一”时它是 4 "，等等):

<h:form>
    <h:selectOneMenu value="#{backingBean.input1}">
        <f:selectItem itemLabel="One" itemValue="1"/>
        <f:selectItem itemLabel="Two" itemValue="2"/>
        <f:ajax render="@form" onevent="function(data) { if (data.status === 'success') { alert(#{backingBean.derivedValue}) }}"/>
    </h:selectOneMenu>

    Input value: #{backingBean.input1}
    Derived value: #{backingBean.derivedValue}
</h:form>

还有支持bean:

@ManagedBean
@ViewScoped
public class BackingBean {

    private int input1;
    private int derivedValue;

    public int getDerivedValue() {
        return derivedValue;
    }

    public void setDerivedValue(int derivedValue) {
        this.derivedValue = derivedValue;
    }

    public int getInput1() {
        return input1;
    }

    public void setInput1(int input1) {
        this.input1 = input1;
        derivedValue = input1 * 2;
    }
}

有没有办法做到这一点？ (顺便说一句，我已经在这个网站上阅读了无数线程，它们是如何处理 JSF/ajax/javascript 一起工作的，但不是这个特定的问题)

Answer 1

我成功实现了此答案中提出的解决方案，Getting backing bean value with Javascript使用 PrimeFace's RequestContext在服务器端添加 Javascript 回调参数。

这是我的 Facelets 页面:

<h:form>
    <p:selectOneMenu value="#{backingBean.input1}">
        <f:selectItem itemLabel="One" itemValue="1"/>
        <f:selectItem itemLabel="Two" itemValue="2"/>
        <p:ajax oncomplete="afterLoad(xhr, status, args)"/>
    </p:selectOneMenu>
    <h:outputScript>
        function afterLoad(xhr, status, args) {    
          alert("Input * 2 = " + args.derived);
        }
    </h:outputScript>
</h:form>

这是我的支持bean:

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.context.RequestContext;

@ManagedBean
@ViewScoped
public class BackingBean {

    private int input1;
    private int derivedValue;

    public int getDerivedValue() {
        return derivedValue;
    }

    public void setDerivedValue(int derivedValue) {
        this.derivedValue = derivedValue;
    }

    public int getInput1() {
        return input1;
    }

    public void setInput1(int input1) {
        this.input1 = input1;
        derivedValue = input1 * 2;
        RequestContext.getCurrentInstance().addCallbackParam("derived", derivedValue);
    }
}

(我不知道这是否是集成 JSF 和 D3 的好解决方案。)

另见

• Getting backing bean value with Javascript