2

JSF で最初の複合コンポーネントを作成していますが、奇妙な動作をする再レンダリングに困惑しています。コンポーネントの実装は次のとおりです (ポップアップを意図しています)。

    <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 がランダムに配置されているように見える原因は何ですか?

4

1 に答える 1

6

BalusCがコメントで示唆しているように、cc：insertChildrenをah：panelGroupでラップすることは機能しているようです。たとえば、これは機能します。

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

これにより、複合コンポーネント（target = "head"を使用）でスタイリングとjsを保持できるため、全体としてははるかに優れたソリューションになります。

これは、outputStylesheetタグとoutputScriptタグが原因のMojarraのバグです。target = "head"を追加すると、実際のIndexOutOfBoundExceptionsが発生します。ターゲットがないと、ポストバックで奇妙なことをするだけです。

現在の解決策は、メインアプリケーションにスタイルシートとスクリプトを含めることです。ただし、これにより、コンポジットの簡単な再利用性が部分的に無効になります。

関連する未解決の問題：

于 2012-10-18T08:39:01.920 に答える