如何部分重新加载 ui:repeat？答案

【问题标题】：How to partially reload a ui:repeat?如何部分重新加载 ui:repeat？
【发布时间】：2012-07-07 00:27:18
【问题描述】：

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

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

实际上，当用户点击按钮时，服务器会返回旧项和新项，JSF客户端每次都必须通过jQuery重新构建整个repeater。

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

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

【问题讨论】：

如果我没听错的话，你有一个包含 n 个项目的初始列表，首先显示 10 个，然后你想显示下一个 10，然后像分页一样继续显示。我猜你的支持 bean 中有 2 个列表：1 个包含整个列表项，第二个包含 10 个长度，每个 ajax 请求都填充，对吧？
确实如此，但这不是分页：我们想显示前 10 个项目，然后是前 20 个项目（10 个旧项目，10 个新项目），类似于 Facebook 墙
@XavierPortebois：我还想知道您是使用分页还是只是添加到列表中。我编辑了您的问题以澄清（请随时更正）。

标签： java jquery jsf jsf-2 primefaces

【解决方案1】：

在标准的 JSF API 中没有这样的东西。 ~~在 PrimeFaces 中也没有想到任何东西。~~ 对于 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>

支持 bean：

@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的“可扩展列表”示例中找到现场演示。

更新 2)：PrimeFaces p:datascroller 具有 lazyloading with 'on demand scrolling'

【讨论】：

我从今晚开始休假，所以我不能尝试这个，但听起来很有希望。如果 Omnifaces 轻松兼容 Primefaces？
是的。更重要的是，OmniFaces 展示 web 应用程序使用 PrimeFaces 作为 UI。至于启动示例，它是可复制的（当然是在自动组织导入之后），对我来说效果很好。

【解决方案2】：

对于这样的情况，我完全绕过 JSF 并使用带有 jQuery AJAX 的 JAX-RS 服务。这种方法将帮助您构建更好的应用程序，而不仅仅是来自 JSF 的 AJAX 支持。这是基本技术。

在 XHTML 页面中，只需为列表添加一个占位符：

<div id="item_list"></div>

<a href="#" onclick="loadNext();">Load more...</a>

页面加载时，发出 AJAX 请求以填充初始列表。这是示例代码。可能有错别字，但你明白了。

var nextStart = 0;

$(function() {
    loadNext();
});

function loadNext() {
    $.ajax({
        type: "GET",
        url: "api/items?start=" + nextStart,
        success: function(data) {
            appendToList(data);
            nextStart += data.length;
        }
    });
}

function appendToList(data) {
    //Iterate through data and add to DOM
    for (var i = 0; i < data.length; ++i) {
        $("#item_list").append($("<p>", {text: data.productName}));
    }
}

【讨论】：

是的，这在很多情况下都很好用。但是，您不能在表格中使用 JSF 组件（例如按钮）。