如何部分重新加载ui：重复？

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

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

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

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

在JSF2中有可能吗？ JSF似乎并不真正符合这种递归渲染。 唯一可以帮助我们的组件是TreeNode组件，但它看起来有点像黑客： – /

Answer 1

在标准的JSF API中没有类似的东西。 PrimeFaces也没有任何想法。

然而， OmniFaces 可能正是您正在寻找的。 它允许您让JSF仅基于特定的请求参数呈现组件树的子集，该参数可以是组件ID或客户端ID。 您基本上只需使用jQuery的$.get()将和start索引作为请求参数重新加载，并使用jQuery的$.append()将其附加到HTML DOM。

这是一个完整的启动示例。 风景：

            
  
#{item}
  
   $("#showMore").click(function() { $items = $("#items"); var params = { start: $items.find("li").length, componentId: "itemsRepeater" }; $.get(location, params, function(html) { $items.append(html); }); });    

支持bean：

 @ManagedBean @RequestScoped public class Bean { private List items; @ManagedProperty("#{param.start}") private int start; @PostConstruct public void init() { // Just a stub. Do your thing to fill the items. items = new ArrayList(); 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 getItems() { return items; } } 

---

更新 ：可以在当前展示应用程序的页面的“可扩展列表”示例中找到实时演示。

Answer 2

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

在XHTML页面中，只需拥有列表的占位符：

 
 Load more... 

页面加载时，发出一个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($("
", {text: data.productName})); } }