JSF/Primefaces span onClick 自动调用 Backing Bean答案

【问题标题】：JSF/Primefaces span onClick automatically calls Backing BeanJSF/Primefaces span onClick 自动调用 Backing Bean
【发布时间】：2014-10-27 23:56:34
【问题描述】：

我在 JSF 中做一个项目，我遇到了以下问题。

当我创建以下跨度时：

<ui:composition>
    <div id="header" class="header">
        <p style="float: right; padding-right: 20px">
            Welcome, #{infoGet.username} <span class="glyphicon glyphicon-off" style="color: darkred; cursor: pointer;" onclick="#{Login.logout()}" />
        </p>
    </div>
</ui:composition>

它调用这个方法logout()

public void logout() {
    FacesContext.getCurrentInstance().getExternalContext().invalidateSession();
    try {
        FacesContext.getCurrentInstance().getExternalContext().redirect("Landing.xhtml");
    } catch(IOException e) {
        e.printStackTrace();
    }
}

但是在页面加载时，跨度内的 onClick 会自动调用，如果我这样做的话：

public void logout() {
    FacesContext.getCurrentInstance().getExternalContext().invalidateSession();
}

并刷新页面会话将失效。

有没有办法从跨度中调用方法“onClick”？我确实需要它是一个标签，这样我才能正确使用 Bootstrap 图标元素。我知道 onClick 通常用于 Javascript，但它与 JSF 一起使用似乎是合乎逻辑的。

使用@luiggi-mendoza 的解决方案进行编辑

将构图更改为：

<ui:composition>
    <div id="header" class="header">
        <h:form style="float: right; padding-right: 20px">
            <h:commandLink action="#{Login.logout()}" styleClass="clearCommand">
                <span class="glyphicon glyphicon-off" style="color: darkred; cursor: pointer;" />
            </h:commandLink>
        </h:form>
        <p style="float: right; padding-right: 20px">
            Welcome, #{infoGet.username}
        </p>
    </div>
</ui:composition>

明确命令：

#clearCommand {
    cursor: pointer;
}

保持登录不变，现在一切正常。

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

您不应将任何表达式语言直接调用到非 JSF 组件中。您正在寻找的是<h:commandLink>：

<h:form>
    <h:commandLink action="#{Login.logout()}" styleClass="foo">
        <span style="...">logout</span>
    </h:commandLink>
</h:form>

其中foo 是一个CSS 类，您可以在其中清除<a> 的默认格式。然后，您可以使用常见的 HTML <span> 组件将所需的 CSS 应用于您的注销文本。

【讨论】：