如何部分重载ui：repeat？

潘弘扬

2023-03-14

问题内容：

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

在我们的其中一个页面上，有ui:repeat10个项目可供显示；然后用户可以单击某种“显示更多”按钮，并且通过ajax显示更多的10个项目。用户可以单击“显示更多”按钮，直到没有其他项目可以显示为止。注意：这不是分页，每单击一次“显示更多”，显示的列表就会变长。

实际上，当用户单击按钮时，服务器将返回旧项目和新项目，并且JSF的客户端每次必须通过jQuery重建整个转发器。

我们希望找到一个更好，性能更高的解决方案。旧项目在 n-1 和 n 调用之间不会改变，因此如果服务器只能通过ajax返回10个新项目，则效率会更高。

JSF2中可能吗？JSF似乎并不真正符合这种递归渲染。可能可以帮助我们的唯一组件是TreeNode组件，但似乎有点hack：-/

问题答案：

标准JSF API中没有类似的东西。 ~~在PrimeFaces中也没有想到。~~ 对于PrimeFaces，请参阅最后的更新

但是OmniFaces
<o:componentIdParam>可能正是您要寻找的。它允许您让JSF根据特定的请求参数仅呈现组件树的子集，该参数可以是组件ID或客户机ID。您基本上可以只使用jQuery
$.get()来<ui:repeat>将start索引和start索引一起重新加载为请求参数，然后使用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;
    }

}

更新
：现场演示可以的“扩展列表”的例子中找到的<o:componentIdParam>当前展示应用程序的页面。

更新2） ：PrimeFaces
p:datascroller具有“按需滚动”的延迟加载

如何部分重载ui：repeat？

相关阅读

相关文章

相关问答

相关工具

相关文档