2

使用例は次のとおりです。1 回のクリックで 10 行の新しい行をレンダリングしたいのですが、前の行はレンダリングしません。したがって、理論的には、次の 10 行 (空の行) を参照する追加のパネルグループを常にレンダリングするコンポーネントが必要です。ユーザーがクリックすると、このパネルグループのみが ID なしで再レンダリングされ、その ID を持つ新しい空のパネルが下部に追加されます。

これを処理できるすぐに使える JSF タグはありますか、それともカスタム タグ/レンダラーに直接飛び込む必要がありますか?

私のテストに基づいて、UI:repeat は常にリスト全体をループし、タグ内で部分的な更新 (レンダリング) を行うことができませんでした。タグ内で部分的なレンダリングをサポートしていないことがわかります。

Rich/Primefaces/tomahawk のようなフレームワークをさらに追加したくありません。

最新のモハラを使用しています。

4

1 に答える 1

0

あなたのタスクを実行できる JSF のすぐに使用できるコンポーネントについては知りませんが、考えられる回避策は考えられます。

基本的に、定義済みの空のプレースホルダーを用意idし、の AJAX 呼び出しを介して入力し、<h:commandButton>後で HTML DOM が更新されたときに、javascript を介してコンテンツを移動することができます。1 つの注意: JSF コンポーネントに ID を割り当てるときは、 やなどのコンテナに名前を付けてこのアプローチを使用しないように注意してください。コンテナは子の識別子を制御するためです。最後に、要素で定義されたスタイル クラスのみが残ります。基本的な例を以下に示します。<h:dataTable><ui:repeat>

ビュー:

<h:form id="form">
    <h:panelGroup id="basic">
        <ul class="basic-list">
            <ui:repeat var="data" value="#{bean.basicList}">
                <li class="data-class">#{data.value}</li>
            <ui:repeat>
        </ul>
    <h:panelGroup>
    <h:panelGroup id="additional">
        <ul class="additional-list">
            <ui:repeat var="data" value="#{bean.additionalList}">
                <li class="data-class">#{data.value}</li>
            <ui:repeat>
        </ul>
    <h:panelGroup>
    <h:commandButton value="Load 10 more rows">
        <f:ajax render="additional" onevent="replaceData" listener="#{bean.loadAdditionalData}"/>
    </h:commandButton>
</h:form>

豆:

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Data> basicList;//getter+setter
    private List<Data> additionalList;//getter+setter

    @PostConstruct
    public void init() {
        basicList = new ArrayList<Data>();//populate first rows of data from somewhere
    }

    public void loadAdditionalData(AjaxBehaviorEvent event) {
        additionalList = new ArrayList<Data>();//populate additional rows of data from somewhere
        basicList.addAll(additionalList);//just for a possible postback
    }

}

JavaScript :

function replaceData(data) {
    if(data.status == 'success') {
        var toAppend = $('#additional-list').html();
        $('#basic-list').append(toAppend);
    }
}
于 2013-03-11T12:48:02.393 に答える