只有当onclick / oncomplete / on …事件发生时，而不是页面加载时，如何调用JSF backing bean方法

我有两个图像button：

<div class="sidebarOptions"> <input type="image" src="images/homeButton.jpg" onclick="#{home.setRendered(1)}"/> </div> <div class="sidebarOptions"> <input type="image" src="images/memberButton.jpg" onclick="#{home.setRendered(2)}"/> </div> 

然而，当页面加载值1和2时，这两个方法立即被调用。另外，当我点击它时，两个方法都被调用。

我怎样才能实现所需的function，只有在图像button被实际点击时调用bean方法？

Answer 1

这种做法是行不通的。 您似乎混淆了“服务器端”和“客户端”的基本Web开发概念，并误解了JSF和EL的angular色。

JSF是一种服务器端语言，它通过HTTP请求在networking服务器上运行，并产生HTML / CSS / JS代码，并返回HTTP响应。 在生成HTML输出期间，所有以${}和#{}forms的ELexpression式都将在服务器端执行。 JavaScript是一种在Web浏览器上运行并在HTML DOM树上工作的客户端语言。 HTML onclick属性应该指定一个JavaScript函数，它将在客户端在特定的HTML DOM事件中执行。

为了调用JSF托pipebean方法，您需要action或*listener属性。 JSF提供组件来生成所需的HTML，并指定所需的ajax操作，这将改变服务器端的状态。 可以使用<h:commandButton image>生成<input type="image"> <h:commandButton image> 。 一个bean方法可以被该组件的action属性调用。 该组件可以通过embedded<f:ajax>标签来实现。

所以，下面应该为你做：

 <h:form> <div class="sidebarOptions"> <h:commandButton image="images/homeButton.jpg" action="#{home.setRendered(1)}"> <f:ajax execute="@this" render=":sidebar" /> </h:commandButton> </div> <div class="sidebarOptions"> <h:commandButton image="images/memberButton.jpg" action="#{home.setRendered(2)}"> <f:ajax execute="@this" render=":sidebar" /> </h:commandButton> </div> </h:form> <!-- The below is just a guess of what you're really trying to achieve. --> <h:panelGroup id="sidebar" layout="block"> <h:panelGroup rendered="#{home.rendered eq 1}"> Home </h:panelGroup> <h:panelGroup rendered="#{home.rendered eq 2}"> Member </h:panelGroup> </h:panelGroup> 

也可以看看：

• action和actionListener之间的区别
• 如何在JSF组件的on *属性中调用托pipebean操作方法
• 如何使用本地JavaScript在HTML DOM事件上调用JSF托pipebean？