JSF重新渲染复合组件:insertChildren问题

Question

我正在JSF中创建我的第一个复合组件,但我被一个表现奇怪的rerender难倒.这是组件实现(它意味着是一个弹出窗口):

    <composite:implementation>
    <h:outputScript name="nb-popup.js" library="js"/>
    <h:outputStylesheet name="nb-popup.compiled.css" library="style"/>
    <div id="#{cc.clientId}_container" class="nb_popup_container">
        <div style="width:#{cc.attrs.width};height:#{cc.attrs.height};" id="#{cc.clientId}" class="nb_popup">
            <div id="#{cc.clientId}_header" class="nb_popup_header">
                <span class="nb_popup_header_content">
                    <composite:renderFacet name="header"/>
                </span>
                <span class="nb_popup_header_controls">
                    <composite:renderFacet name="controls"/>
                </span>
            </div>
            <div id="#{cc.clientId}_content" class="nb_popup_content">
                <composite:insertChildren/>
            </div>
        </div>
    </div>
    <script>popup('#{cc.clientId}');</script>
</composite:implementation>

例如,假设我们有:

<nb:popup id="extract">
    test
</nb:popup>

生成的HTML没问题:

    <div id="extract_container" class="nb_popup_container">
        <div style="width:auto;height:auto;" id="extract" class="nb_popup">
            <div id="extract_header" class="nb_popup_header">
                <span class="nb_popup_header_content">
                </span>
                <span class="nb_popup_header_controls">
                </span>
            </div>
            <div id="extract_content" class="nb_popup_content">
              test

            </div>
        </div>
    </div>

现在假设我有一个按钮:

    <h:commandLink value="reload">
        <f:ajax render=":extract"/>
    </h:commandLink>

按下它后,我得到以下部分响应,其中实际内容显然不是它应该是的位置:

    <div id="extract_container" class="nb_popup_container">
        <div style="width:auto;height:auto;" id="extract" class="nb_popup">
            <div id="extract_header" class="nb_popup_header">
                <span class="nb_popup_header_content">
                </span>
                <span class="nb_popup_header_controls">
                </span>
            </div>
            <div id="extract_content" class="nb_popup_content">
            </div>
        </div>
    </div>
    <script>popup('extract');</script>
    test
]]>

现在假设我将insertChildren移动到标头:

            <div id="#{cc.clientId}_header" class="nb_popup_header">
                <span class="nb_popup_header_content">
                    <composite:renderFacet name="header"/>
                <composite:insertChildren/>
                </span>
                <span class="nb_popup_header_controls">
                    <composite:renderFacet name="controls"/>
                </span>
            </div>

初始负载应该是应该的:

            <div id="extract_header" class="nb_popup_header">
                <span class="nb_popup_header_content">
         test

                </span>
                <span class="nb_popup_header_controls">
                </span>
            </div>

但在重新加载时,内容再次被移动:

            <div id="extract_header" class="nb_popup_header">
                <span class="nb_popup_header_content">
                </span>
                <span class="nb_popup_header_controls">
    test

                </span>
            </div>

知道在ajax重新渲染之后可能导致insertChildren看似随机放置的原因是什么？

Answer 1

正如BalusC在评论中所建议的,将cc:insertChildren包装在ah:panelGroup中似乎可行.例如,这有效:

            <div id="#{cc.clientId}_content" class="nb_popup_content">
                <h:panelGroup>
                    <composite:insertChildren/>
                </h:panelGroup>
            </div>

这允许我在复合组件中保留样式和js(目标="head"),因此总体来说它是一个更好的解决方案.

由于outputStylesheet和outputScript标记,这是Mojarra中的一个错误.如果添加target ="head",则会获得实际的IndexOutOfBoundExceptions.没有目标它只会在回发上做奇怪的事情.

当前的解决方案是在主应用程序中包含样式表和脚本.这部分地否定了复合材料的容易重复使用性.

相关未决问题:

• http://java.net/jira/browse/JAVASERVERFACES-1853
• http://java.net/jira/browse/JAVASERVERFACES-2053