To achieve Infinite Scroll in Meteorjs, showing latest data first

问题

I've followed the tutorial here, to the letter: http://www.meteorpedia.com/read/Infinite_Scrolling and the result is as intended by the author of the tutorial, i.e. that the infinite scrolling shows the first data (old) in the collection to the last (latest), from top to bottom.

The problem is: The place where I want to implement the infinite scroll is in a newsfeed, much like the one found in Facebook, which shows the most recent (latest) data from the collection first, and when you scroll down, the older data will be added.

I've tried to use createdAt:-1 to sort the data backwards, but a funny thing happened:

Upon refresh, the newsfeed will show the first 3 old data (because I put 3 as the limit), and then when I scroll down, another 3 set of data (newer not latest) will be appended at the TOP of the old data, and this pattern continues until the data fully loaded on screen. What I want to achieve is similar to Facebook's Newfeed i.e. the newsfeed shows the latest/recent data at the top, and as the user scrolls down, older data gets called and added to the client. The code is as provided below:

statusBox.html(client)

<template name="statusBox">
    {{#each newsfeedList}}

    ..HTML template goes here..

    {{/each}}
    {{#if moreResults}}
        <div id="showMoreResults" class="text-center" style="margin-left: 25px;">
            <span class="loading"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i></span>
        </div>
    {{/if}}
</template>

publish.js(server)

Meteor.publish('status', function(limit){
  return Status.find({}, {limit:limit});
});

statusBox.js(client)

newsfeed_increment = 3;
Session.setDefault('newsfeedLimit', newsfeed_increment);
Deps.autorun(function(){
  Meteor.subscribe('status', Session.get('newsfeedLimit'));
});

Template.statusBox.helpers({
  //Merging few collections into one template helper: https://stackoverflow.com/questions/21296712/merging-collections-in-meteor
  newsfeedList: function(){
    return Status.find({},{sort:{createdAt:-1}});
  },

  ...

  //Reference for infinitescrolling: http://www.meteorpedia.com/read/Infinite_Scrolling
  moreResults: function() {
    // If, once the subscription is ready, we have less rows than we
    // asked for, we've got all the rows in the collection.
    return !(Status.find().count() < Session.get("newsfeedLimit"));
  }
});

// whenever #showMoreResults becomes visible, retrieve more results
function showMoreVisible() {
    var threshold, target = $("#showMoreResults");
    if (!target.length) return;

    threshold = $(window).scrollTop() + $(window).height() - target.height();

    if (target.offset().top < threshold) {
        if (!target.data("visible")) {
            // console.log("target became visible (inside viewable area)");
            target.data("visible", true);
            Session.set("newsfeedLimit",
                Session.get("newsfeedLimit") + newsfeed_increment);
        }
    } else {
        if (target.data("visible")) {
            // console.log("target became invisible (below viewable arae)");
            target.data("visible", false);
        }
    }
}

// run the above func every time the user scrolls
$(window).scroll(showMoreVisible);

The result: before scroll

The result: after scroll

(The 'status' entered were 1,2,3,4,5,6 sequentially. Note the new addition of box 4, 5, 6, on top of box 1,2,3 off the picture)

回答1:

You need to sort the results on your publish function

publish.js(server)

Meteor.publish('status', function(limit){
  return Status.find({}, {limit:limit, sort: {createdAt: -1}});
});

来源：https://stackoverflow.com/questions/44299272/to-achieve-infinite-scroll-in-meteorjs-showing-latest-data-first

标签

javascript

meteor

infinite-scroll