CODEWITHSUNDEEP
angularjslazy-loadingfirebase
Ren
Ren

Reputation: 93

Firebase - Lazy Loading List of Data

I have a requirement where I want to display say the first 10 entries in a list and once the user scrolls down I would like to append the next 10 entries. I am currently using Angularfire and all the documentation specifies that I should not do array operations on a $FirebaseArray:

This array should not be directly manipulated. Methods like splice(), push(), pop(), and unshift() will cause the data to become out of sync with server.

So my options are to load the next 10 entries and:

Here is the code that initially loads the list (based on the Angularfire seed app):

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

And here is the code that is triggered when the user scrolls down:

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

Upvotes: 2

Views: 1836

Answers (1)

Ren
Ren

Reputation: 93

Based on Kato's comment the following is the best solution given the current API.

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

And the scroll trigger

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

Upvotes: 1

Related Questions