Firebase - 지연로드 데이터 목록

목록에 처음 10 개의 항목을 표시하고 사용자가 아래로 스크롤하면 다음 10 개의 항목을 추가하고 싶습니다. 나는 현재 Angularfire를 사용하고 있으며 모든 문서는 $ FirebaseArray에서 배열 연산을해서는 안된다고 명시하고 있습니다 :Firebase - 지연로드 데이터 목록

이 배열은 직접 조작해서는 안됩니다. splice(), push(), pop() 및 unshift()와 같은 메소드는 데이터가 서버와 동기화되지 않게합니다.

그래서 내 옵션은 다음 10 개 항목 및로드 할 수 있습니다

사용 $의 추가(), 다시 서버에 기록 할
(이 성가신 재귀를 일으킬 수 있다고 생각) concat을 사용하면 내 데이터가 서버와 동기화되지 않을 수 있습니다.
목록을 다시 가져 오지만 제한을 20으로 조정하면 모든 데이터가 지연로드 목적을 무력으로 다시로드하게됩니다. 여기

처음합니다 (Angularfire 씨 응용 프로그램 기준) 목록로드하는 코드입니다 :

var lastKey = null; 
var firstKey = null; 
$scope.messages = fbutil.syncArray(userMessages,{'limit':10}); 
$scope.messages.$loaded(function(data){ 
    lastKey = data.$keyAt(data.length-1); 
    firstKey = data.$keyAt(0); 
});

을 그리고 여기 트리거 코드 때 아래로 사용자가 스크롤 :

$document.on('scroll', function() { 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
    var newMessages = fbutil.syncArray(messagePath,{'limit':10,'startAt':lastKey}); 
    newMessages.$loaded(function(data){ 
     lastKey = data.$keyAt(data.length-1); 
     firstKey = data.$keyAt(0); 
     $scope.messages.concat(newMessages);// this is probably a bad idea 
    }); 
    } 
});

출처

2014-09-23 Ren

당신이 AngularFire에 대한 설명서 페이지에 계속 읽으려면 (https://www.firebase.com/docs/web/libraries/angular/quickstart.html) "대신 AngularFire는 $ add(), $ save() 및 $ remove()와 같은 동기화 된 배열을 조작 할 수있는 일련의 메소드를 제공합니다. 그래서 항목을 추가/제거하는 방법입니다. 그러나 무한 스크롤 목록을 구현하는 것은 그렇게 문서화되지 않았습니다. 이미 구현을 시작 했습니까? –

카토의 블로그 게시물 (https://www.firebase.com/blog/2013-10-01-queries-part-one.html#paginate)을 살펴보십시오. 본질적으로로드 온 디맨드 (load-on-demand)를 구현하는 방법 인 페이지 매김 (pagination)을 수행하는 방법을 보여줍니다. –

@Frank van Puffelen 이전에 Kato의 페이지 매김 예제를 살펴 봤지만 사용 사례는 약간 다릅니다. 페이지 매김에서는 기존 목록을 새 목록으로 바꿉니다. 내가해야 할 일은 현재 목록에 다음 10 개의 항목을 추가하는 것입니다. 그러나 $ add()를 사용하면 다음 10 개의 항목이 로컬 및 서버의 현재 목록에 추가되고 concat()을 사용하면 데이터가 서버와 동기화되지 않을 위험이 있습니다. – Ren

Kato의 의견을 바탕으로 다음은 현재 API에서 제공되는 최상의 솔루션입니다.

var limit= 10; 
$scope.messages = fbutil.syncArray(messagePath,{'limit':limit});

그리고 스크롤 트리거

$document.on('scroll', function() { 
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
    limit += 10; 
    $scope.messages = fbutil.syncArray(messagePath,{'limit':limit}); 
} 
});

출처

2014-09-25 07:42:32 Ren

Firebase - 지연로드 데이터 목록

답변

관련 문제