java – 如何部分重新加载ui:重复?

我们有一个基于JBoss 7.1与JSF2和Primefaces 3.3构建的Web应用程序。

在我们的一个页面上,有一个ui:重复显示10个项目;那么用户可以点击某种“显示更多”按钮,通过ajax显示10个以上的项目。用户可以点击“显示更多”按钮,直到没有更多的项目显示。注意:这不是分页,每次点击“显示更多”时,显示的列表变长。

事实上,当用户点击按钮时,服务器返回旧项目和新的项目,JSF的客户端必须通过jQuery每次重建整个中继器。

我们希望找到一个更好和更有效的解决方案。旧的项目在n-1和n调用之间不会改变,所以如果服务器只能通过ajax返回10个新的项目将会更有效。

是否可能在JSF2? JSF似乎并不符合这种递归渲染。可能可以帮助我们的唯一组件将是一个TreeNode组件,但它似乎有点黑客: – /

在标准JSF API中没有什么。在PrimeFaces中也没有什么值得注意的。

OmniFaces <o:componentIdParam>可能正是您正在寻找的。它允许您让JSF根据特定的请求参数(可以是组件ID或客户端ID)仅渲染组件树的子集。您可以基本上只使用jQuery的$.get()来重新加载< ui:repeat>以及起始索引作为请求参数,并使用jQuery的$.append()将其附加到HTML DOM。

这是一个完整的开球示例。风景:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:o="http://omnifaces.org/ui"
>
    <f:metadata>
        <o:componentIdParam componentIdName="componentId" />
    </f:metadata>
    <h:head>
        <title>Stack Overflow Question 11364006</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Substitute with PrimeFaces' one, if necessary. -->
    </h:head>
    <h:body>
        <ul id="items">
            <ui:repeat id="itemsRepeater" value="#{bean.items}" var="item">
                <li>#{item}</li>
            </ui:repeat>
        </ul>
        <input type="button" id="showMore" value="Show more"/>
        <h:outputScript>
            $("#showMore").click(function() {
                $items = $("#items");
                var params = { start: $items.find("li").length, componentId: "itemsRepeater" };
                $.get(location, params, function(html) {
                    $items.append(html);
                });
            });
        </h:outputScript>   
    </h:body>
</html>

后备豆

@ManagedBean
@RequestScoped
public class Bean {

    private List<String> items;

    @ManagedProperty("#{param.start}")
    private int start;

    @PostConstruct
    public void init() {
        // Just a stub. Do your thing to fill the items.
        items = new ArrayList<String>();
        int size = start + 10;

        for (int i = start; i < size; i++) {
            items.add("item " + (i + 1));
        }
    }

    public void setStart(int start) {
        this.start = start;
    }

    public List<String> getItems() {
        return items;
    }

}

更新:可以在the <o:componentIdParam> page of current showcase application的“展开式列表”示例中找到现场演示。

http://stackoverflow.com/questions/11364006/how-to-partially-reload-a-uirepeat

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:java – 如何部分重新加载ui:重复?