RxJSポーリング

Question

私は、彼は、彼らがネットフリックスのスクロールを解く方法を説明しhttps://www.youtube.com/watch?v=zlERo_JMGCw 29:38

にマシューPodwysockiイベントを見ていました。以前のデータがクリーンアップされ、より多くのデータが追加されたとき（ただし、スクロールバックすると前のデータが再び表示される）

私は似てやってみたかったが、私はNetflixのデモコードつかん：

function getRowUpdates(row) { 
    var scrolls = Rx.Observable.fromEvent(document, 'scroll'); 
    var rowVisibilities = 
    scrolls.throttle(50) 
     .map(function(scrollEvent) { 
     return row.isVisible(scrollEvent.offset); 
     }) 
     .distinctUntilChanged(); 

    var rowShows = rowrowVisibilities.filter(function(v) { 
    return v; 
    }); 
    var rowHides = rowrowVisibilities.filter(function(v) { 
    return !v; 
    }); 

    return rowShows 
    .flatMap(Rx.Observable.interval(10)) 
    .flatMap(function() { 
     return row.getRowData().takeUntil(rowHides); 
    }) 
    .toArray(); 
} 

をしかし、私はここに、スクロールに応じて、新しいデータやページデータを渡す方法について少し困惑している...誰かが少しを与えることができます私は次の操作を行うことができる方法の説明：

• は、最初のリストを取得するには
• 再（ページング次のページを使用して）
• は、ユーザスクロールダウンとしてより多くのリストを取得（私はそれを行うことができます）以前にフェッチしたデータをメモリから移動し、要求に応じて再フェッチ（スクロールアップ）します。

Answer 1

ここで私は一般的な行でそれを行う方法です。これがあなたに満足を与えると思われる場合は、私は編集し、詳細を追加します。

バージョン2：（最初のものについては、編集変更を参照）

宅内：

1. 動的リストを含むタグが "ゾーン" と呼ぶことにします。
2. リストの各行は、何かを含むことができる別のDIVに含まれます。
3. ページはゾーンをカバーするのに十分な行です。必要なデータを保持するためのJavaScript変数numberOfLinesOnFirstLoad、numberOfLinesOnPageLoad、numberOfLinesToLoadAfter
4. ：
5. 三javascriptの "定数" 行[ページ番号]、高さ[ページ番号]、currentPageNumber = 1、maxPageNumber = 0
6. ページ＃：＃ページ番号
7. 行[ページ番号]には、実際のDOMオブジェクトではなくデータベースから戻す方法が含まれています。

手順/イベント：

1. ゾーンのタグを追加します。
2. numberOfLinesOnFirstLoad行をロードします。
3. 合計行の高さが劣っているゾーンの高さに3を掛けた場合は、numberOfLinesToLoadAfter行をロードします。行が追加されている場合は手順3を繰り返し、それ以外の場合は手順4に進みます。
4. maxPageNumber + = 1。ゾーンをいっぱいに満たす次の行を探します。これらの行を行["page" + maxPageNumber]（配列として）に追加します。これらの高さを計算し、高さ["page" + "maxPageNumber]に追加してください。
5. さらに行がなくなるまでステップ4を繰り返し、ステップ6に進みます。
6. スクロールダウンとページ1（行["page1"]の最後の要素を意味します）が表示されていない場合は、次のように追加します。
7. maxPageNumber + = 1. numberOfLinesOnPageLoad行をロードします。
8. 新しい行の高さの合計がゾーンの高さより低い場合、numberOfLinesToLoadAfter行。行が追加されている場合は手順8を繰り返し、それ以外の場合は新しい行の高さを高さ["ページ" + maxPageNumber]にし、新しい行を行["ページ" + maxPageNumber]に配列として入れ、この行を入力した後にステップに進みますまたは11）。
9. page2が表示されていない場合は、DOMからpage1要素を削除し、page1.height（height ["page1"]）を削除してスクロール位置を調整します。
10. ページ5をロードします（手順7と8）。
11. これで、page2とpage5が見えないゾーンにpage2からpage5があります。 page3が完全に見える場合、page4は表示されません。それ以外の場合は、page3とpage4の一部が表示されます。
12. スクロールアップしてpage2が表示されるとき（行[page2 "]の最後の要素）、行[" page1 "]を使用してpage1をロードし、page1を追加します。 height（ "[page1"]）をスクロールしてDOMからpage5を削除します。変数の行から変数& &の高さとmaxPageNumber - = 1を削除することもできますが、このページを1つのプロセスで再ロードするようにすることもできます（ページの読み込みは、ページ定義が既に存在するかどうかを確認することを意味します変数）。