Question

我正在开发一个JSF应用程序，我对使用JSTL的Facelets页面有疑问。我希望以ui显示：重复一些问题，一个问题和3个答案（有条件地形成）并在答案前面勾选（tickSmall.png）或X（xSmall.png）如果问题是正确的或错。

答案是正确形成的，但是tick / X没有正确放置（我检查了布尔是正确的，有些是真的，有些是假的）。每次放一个X，即使应该有一个勾号。

我已加入xmlns:c="http://java.sun.com/jsp/jstl/core

代码：

     <ui:repeat var="n"
                    value="#{answerResultBean.accessWrongAnswerColumnWrapperList}">
                    <hr />
                    <h:outputText value="#{n.noQuestion}. #{n.question}" />
                    <h:panelGrid columns="2" style="text-align: left;">
                        <c:choose>
                            <c:when test="#{n.rightGridAnswerA}">
                                <h:form>
                                    <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
                                </h:form>
                            </c:when>
                            <c:otherwise>
                                <h:form>
                                    <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
                                </h:form>
                            </c:otherwise>
                        </c:choose>
                        <h:outputText value="a) #{n.a}"
                            style="#{n.userAnswerA ? 'font-weight:bold;' : 'font-weight:normal;'}" />

                        <c:choose>
                            <c:when test="#{n.rightGridAnswerB}">
                                <h:form>
                                    <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
                                </h:form>
                            </c:when>
                            <c:otherwise>
                                <h:form>
                                    <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
                                </h:form>
                            </c:otherwise>
                        </c:choose>
                        <h:outputText value="b) #{n.b}"
                            style="#{n.userAnswerB ? 'font-weight:bold;' : 'font-weight:normal;'}" />

                        <c:choose>
                            <c:when test="#{n.rightGridAnswerC}">
                                <h:form>
                                    <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
                                </h:form>
                            </c:when>
                            <c:otherwise>
                                <h:form>
                                    <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
                                </h:form>
                            </c:otherwise>
                        </c:choose>
                        <h:outputText value="c) #{n.c}"
                            style="#{n.userAnswerC ? 'font-weight:bold;' : 'font-weight:normal;'}" />
                    </h:panelGrid>
                </ui:repeat>

Answer 1

JSTL标记和JSF组件不会像编码所期望的那样同步运行。 JSTL标记在视图构建期间首先运行，生成JSF组件树。此后，JSF组件在视图渲染时运行，从而生成HTML输出。因此，当JSTL运行时，#{n}在EL范围内无处可用，因为此时<ui:repeat>尚未运行。

您需要使用JSF组件的rendered属性，或者以智能方式在EL中使用三元运算符。

以下笨拙的块

<c:choose>
    <c:when test="#{n.rightGridAnswerA}">
        <h:form>
            <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
        </h:form>
    </c:when>
    <c:otherwise>
        <h:form>
            <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
        </h:form>
    </c:otherwise>
</c:choose>
...
<c:choose>
    <c:when test="#{n.rightGridAnswerB}">
        <h:form>
            <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
        </h:form>
    </c:when>
    <c:otherwise>
        <h:form>
            <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
        </h:form>
    </c:otherwise>
</c:choose>
...
<c:choose>
    <c:when test="#{n.rightGridAnswerC}">
        <h:form>
            <img src="/juritest/resources/img/tickSmall.png" alt="tick" />
        </h:form>
    </c:when>
    <c:otherwise>
        <h:form>
            <img src="/juritest/resources/img/xSmall.png" alt="wrong" />
        </h:form>
    </c:otherwise>
</c:choose>

可以使用rendered属性重写如下：

<h:form>
    <h:graphicImage name="img/tickSmall.png" alt="tick" rendered="#{n.rightGridAnswerA}" />
    <h:graphicImage name="img/xSmall.png" alt="wrong" rendered="#{not n.rightGridAnswerA}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/tickSmall.png" alt="tick" rendered="#{n.rightGridAnswerB}" />
    <h:graphicImage name="img/xSmall.png" alt="wrong" rendered="#{not n.rightGridAnswerB}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/tickSmall.png" alt="tick" rendered="#{n.rightGridAnswerC}" />
    <h:graphicImage name="img/xSmall.png" alt="wrong" rendered="#{not n.rightGridAnswerC}" />
</h:form>

或使用条件运算符如下：

<h:form>
    <h:graphicImage name="img/#{n.rightGridAnswerA ? 'tick' : 'x'}Small.png" alt="#{n.rightGridAnswerA ? 'tick' : 'wrong'}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/#{n.rightGridAnswerB ? 'tick' : 'x'}Small.png" alt="#{n.rightGridAnswerB ? 'tick' : 'wrong'}" />
</h:form>
...
<h:form>
    <h:graphicImage name="img/#{n.rightGridAnswerC ? 'tick' : 'x'}Small.png" alt="#{n.rightGridAnswerC ? 'tick' : 'wrong'}" />
</h:form>

（仍然不是DRY，但这是一个不同的问题）

使用JSTL进行条件图像渲染<c：选择> </c：选择>

1 个答案:

另见：