如何部分重新加载 ui:repeat? [英] How to partially reload a ui:repeat?
问题描述
我们有一个基于 JBoss 7.1、JSF2 和 Primefaces 3.3 的网络应用程序.
We've got a web application built on JBoss 7.1 with JSF2 and Primefaces 3.3.
在我们的一个页面上，有一个 ui:repeat 显示 10 个项目；然后用户可以单击某种显示更多"按钮，然后通过 ajax 显示另外 10 个项目.用户可以单击显示更多"按钮，直到没有更多项目要显示.注意:这不是分页，每次点击显示更多"，显示的列表会变长.
On one of our page, there is a ui:repeat displaying 10 items; then the user can click on some kind of "show more" button and 10 more items are displayed through ajax. The user can click the "show more" button until there is no more items to show. Note: This is not pagination, the displayed list gets longer with each click on "show more".
实际上，当用户点击按钮时，服务器返回旧项和新项，JSF的客户端每次都必须通过jQuery重建整个repeater.
In fact, when the user clicks on the button, the server returns the old items and the new ones, and the client side of JSF must rebuild the whole repeater through jQuery each time.
我们希望找到更好、更高效的解决方案.旧项目在 n-1 和 n 调用之间不会改变，所以如果服务器只能通过 ajax 返回 10 个新项目，效率会更高.
We would like to find a better and more performant solution. The old items don't change between the n-1 and the n call, so it would be more efficient if the server could only return through ajax the 10 new items.
在 JSF2 中可以吗?JSF 似乎并不真正符合这种递归渲染.唯一可能可以帮助我们的组件是 TreeNode 组件，但它似乎有点 hack :-/
Is it possible in JSF2 ? JSF seems not really compliant with this kind of recursive rendering. The only component that maybe could help us would be a TreeNode component, but it seems a bit of a hack :-/
推荐答案
标准 JSF API 中没有类似的东西.在 PrimeFaces 中也没有想到. 对于 PrimeFaces，请参阅最后的更新
There's nothing like that in the standard JSF API. Also nothing comes to mind in PrimeFaces. For PrimeFaces see the update at the end
OmniFaces $.get() 来重新加载 <ui:repeat> 以及作为请求参数的起始索引，并使用 jQuery 的 $.append() 将其附加到 HTML DOM.
The OmniFaces <o:componentIdParam> may however be exactly what you're looking for. It allows you to let JSF render only a subset of the component tree based on a specific request parameter, which can be a component ID or a client ID. You could basically just use jQuery's $.get() to reload the <ui:repeat> along with the start index as a request parameter and use jQuery's $.append() to append it to the HTML DOM.
这是一个完整的启动示例.观点:
Here's a complete kickoff example. The view:
<!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;
}
}
<小时>
更新:可以在 当前展示应用的
Update: a live demo can be found in the "Expandable list" example of the <o:componentIdParam> page of current showcase application.
更新 2):PrimeFaces p:datascroller 有 使用按需滚动"延迟加载
Update 2): PrimeFaces p:datascroller has lazyloading with 'on demand scrolling'
这篇关于如何部分重新加载 ui:repeat?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
