<h:commandButton> 在 <ui:define> 中不起作用

Question

我创建了一个名为 loginRegisterTemplate.xhtml 的 facelet 模板。当我在模板客户端中使用它并在其中放置 a 时，不会调用托管 bean 中的方法。没有模板，按钮工作正常。为什么会这样？

    <ui:composition template="resources/css/faceletsTemplates/loginRegisterTemplate.xhtml">
        <ui:define name="top">
            Login Page
        </ui:define>
        <ui:define name="content">
            <div align="center">
                <h:panelGrid columns="3" columnClasses="rightalign,leftalign,leftalign">

                    <h:outputLabel value="Username:" for="userName"/>
                    <h:inputText id="userName" label="Username" required="true" value="#{loginBean.userName}" />
                    <h:message for="userName" />

                    <h:outputLabel value="Password:" for="password"/>
                    <h:inputText id="password" label="Password" required="true" value="#{loginBean.password}" />
                    <h:message for="password" />
                </h:panelGrid><br/>

                <h:button value="Back to Home" outcome="home"/>
                <h:commandButton id="login" value="Login" action="#{loginBean.doLogin}"/>
            </div>
        </ui:define>
    </ui:composition>
</h:body>

在它旁边的简单的<h:button> 工作正常。

这是我的模板文件的正文：

<h:body>
    <div id="top">
        <ui:insert name="top">Top</ui:insert>
    </div>
    <div id="content" class="center_content">
        <ui:insert name="content">Content</ui:insert>
    </div>
</h:body>

我看过这里：h:commandLink / h:commandButton is not being invoked，但我找不到是哪个问题导致的。

谢谢！

Answer 1

为什么h:commandButton 不起作用？

您的问题是answer you have checked 中的第一个问题。

UICommand 和 UIInput 组件必须放在 UIForm 中 组件，例如<h:form>.

那为什么h:button 还在工作呢？

来自h:button docs：

呈现“按钮”类型的 HTML“输入”元素。的价值 组件呈现为按钮文本和结果 组件用于确定被激活的目标 URL 点击。

所以...

JSF 会将您的 h:button outcome 值放入一个 JavaScript 函数中，该函数将在 onclick 事件中执行。但是它会在POST方法提交的表单上执行h:commandButton的action，所以应该有表单可以提交。