Meteorjsで無限スクロールを達成するには、最新のデータを最初に表示する

Question

ここではチュートリアルの文字：http://www.meteorpedia.com/read/Infinite_Scrollingに従っています。結果はチュートリアルの作者の意図通りです。つまり、無限スクロールでは最初のデータ古い）コレクションから最後（最新）、上から下に移動します。

問題は次のとおりです。無限のスクロールを実装したい場所は、Facebookのものとよく似ています。ニュースフィードには、コレクションの最新（最新）のデータが最初に表示されます。古いデータが追加されます。

私は後方のデータをソートするcreatedAt:-1を使用しようとしましたが、面白いことが起こった：（私は限度として3を置くため）

がリフレッシュされると、ニュースフィードは、最初の3件の古いデータが表示され、下にスクロールすると、古いデータのTOPに別の3セットのデータ（最新でないもの）が追加され、このパターンはデータが画面に完全に読み込まれるまで続きます。私が達成したいのは、FacebookのNewfeedに似ています。すなわち、ニュースフィードは一番上に最新の/最近のデータを表示し、ユーザーがスクロールすると古いデータが呼び出され、クライアントに追加されます。以下に提供されるコードは：

statusBox.html（クライアント）

<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（サーバ）

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

statusBox.js（クライアント）

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); 

結果：

（'ステータスが' 入力されたスクロールが1,2あった後：

結果スクロールする前に、3,4,5,6 。 ）絵オフボックス1,2,3の上に、

Answer 1

を箱4、5、6の新しい追加を注意してくださいあなたは（あなたの関数を公開

publish.jsに結果をソートする必要がありますサーバー）

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