Firebase: Paginate Infinite Scroll

Question

I'm following the Firebase-util Paginate Infinite Scroll demo, and was wondering if there is a way to load an initial number of items, instead of loading 0 items to begin with.

When I click on my button, I'm loading in the next 16 items. Is there a way I can load 16 items on the initial load, and then another 16 upon clicking my button, etc etc?

My HTML and JS looks like this:

index.html

<h3>Items loaded: {{scrollItems.length}}</h3>
<button ng-click="scrollItems.scroll.next(16)">Load Next 16</button>

app.js

app.controller('ServiceListController', ['$scope', '$firebaseArray', '$scrollArray',
  function($scope, $firebaseArray, $scrollArray) {
    var servicesRef = new Firebase('https://fbutil.firebaseio.com/paginate');
    $scope.scrollItems = $scrollArray(servicesRef, 'number');
}])

app.factory('$scrollArray', ['$firebaseArray', function($firebaseArray) {
  return function(ref, field) {
    var scrollRef = new Firebase.util.Scroll(ref, field);
    var list = $firebaseArray(scrollRef);
    list.scroll = scrollRef.scroll;

    return list;
  }
}])

Here's a demo of this in action.

Any help with this is appreciated. Thanks in advance!

How do you guys initialize the Firebase.util.Scroll? And is there an npm that I need to install to in order to use this library? I have a problem on where to declare the javascript, whether I put it in my index.html, or somewhere else if using ionic2. I get this exception when declaring the firebase-util.js in my index.html TypeError: Cannot read property 'Scroll' of undefined — Warner, Apr 17 '16 at 13:23

score 1 · Answer 1 · answered May 12 '15 at 18:39

You can just tell it to get the first 16 right away.

list.scroll = scrollRef.scroll;
list.scroll.next(16);
return list;

If you look at the docs for firebase util on scrolling: https://github.com/firebase/firebase-util/blob/master/src/Paginate/README.md

They have these lines under scroll usage:

// download the first 20 records
scrollRef.scroll.next(20);

Firebase: Paginate Infinite Scroll

1 Answers1