Question

当向下滚动时，我正在使用jsf 2.3和primefaces 6.2构建应用程序，我想加载更多数据并将其附加到旧数据中。下面是我的代码。

我的JSF代码

<h:commandScript name="loadMoreTimeline" execute="@this" render=":postForm:panelBlock" action="#{timelineBean.loadMoreTimeline()}" />     

<h:panelGroup id="panelBlock" styleClass="panelBlock" layout="block">
   <ui:repeat id="timelineRepeater" value="#{timelineBean.timelineList}" var="timeline">
     <div data-id="#{timeline.postId}">
       <h:outputText escape="false" value="#{timeline.content}" />
     </div>
   </ui:repeat>
</h:panelGroup>

@Named
@ViewScoped
public class TimelineBean implements Serializable {
  private List<Timeline> timelineList;

  @PostConstruct
  public void init() {
     //loaded initially and contains the first N records.
     timelineList = feedService.getTimelines();

  }

  // SQL - SELECT * FROM timeline WHERE post_id < 'post_id' ORDER BY post_id DESC LIMIT 10
  public void loadMoreTimeline() {
    String lastId = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("lastId");
    long postId = Long.valueOf(lastId);
    timelineList.addAll(feedService.getTimelines(postId));
  }

  public List<Timeline> getTimelineList() {
    return timelineList;
  }


}

jQuery代码

$(window).scroll(function() {
  if ($(window).scrollTop() === $(document).height() - $(window).height()) { 
    //get the last div postid
    var lastId = $('.post-item:last').attr('data-id');
    // calling my commandScript
    loadMoreTimeline({lastId: lastId"});
  }
});

上面的代码效果很好，但是它呈现了panelBlock div内的所有组件树。我想要一种基于特定请求参数仅呈现组件树子集的情况。

因此，我遇到了Omnifaces组件，该组件通过GET参数仅在视图上呈现一个或多个组件。 How to partially reload a ui:repeat?我的问题是它将如何与我的代码一起工作。因为postConstruct最初将加载前N条记录，所以我将如何调用loadMoreTimeline（）方法。

<h:outputScript>
        $("#showMore").click(function() {
            $items = $("#items");
            var params = { start: $items.find("li").length, componentId: "itemsRepeater" };
            //jQuery's $.get() reload the <ui:repeat>
            $.get(location, params, function(html) {
                $items.append(html);
            });
        });
</h:outputScript>

向下滚动并将更多数据加载到ui：repeat

0 个答案: