googlearchive / firebase-util

An experimental toolset for Firebase
http://firebase.github.io/firebase-util
MIT License
276 stars 67 forks source link

Scroll not working on normalized collection #83

Open laurensnl opened 8 years ago

laurensnl commented 8 years ago

I've got an issue with infinite scrolling a list with a normalized collection.

The initial data is loaded correctly, but no subsequent data is loaded on scroll, but no more data is loaded when scrolling down. Infinite scrolling does work when I replace the normalized collection ref to a standard Firebase ref. What am I doing wrong here?

// map the paths we are going to join
var norm = new Firebase.util.NormalizedCollection(
    FB.child('sessions'),
    [FB.child('accounts'), 'accounts', 'sessions.user']
);

// specify the fields for each path
norm = norm.select( 'sessions.user', 'sessions.loginTime', 'sessions._sort', ... );

// get a reference we can use like a normal Firebase instance
var scrollRef = new Firebase.util.Scroll(norm.ref(), '_sort');

firebase#2.2.9 firebase-util#0.2.6

laurensnl commented 8 years ago

The above seems only be the case when using a NormalizedCollection as a Scroll ref as a data source for ui-grid (version 1.7.2). The rest of my code looks like this:

// UI grid data
vm.sessions.data = $firebaseArray(scrollRef);

// load 50 records initially
scrollRef.scroll.next(50);

vm.sessions.onRegisterApi = function(gridApi){

    // filter
    gridApi.core.on.filterChanged( $scope, function() {
        var grid = this.grid;

        if( grid.columns[0].filters[0].term === '' ) {
            vm.sessions.data = $firebaseArray(scrollRef);
        } else {
            vm.sessions.data = $firebaseArray(FB.child('sessions').orderByChild('displayName').startAt(grid.columns[0].filters[0].term).endAt(grid.columns[0].filters[0].term + '~'));
        } 
    });

    // scroll down
    gridApi.infiniteScroll.on.needLoadMoreData($scope,function(){
        console.log('more');
        scrollRef.scroll.next(50);
    });

    // scroll up
    gridApi.infiniteScroll.on.needLoadMoreDataTop($scope,function(){
        scrollRef.scroll.prev(50);
    });

    vm.sessions.data.$watch(function() {
        $scope.$evalAsync(function() {
            gridApi.infiniteScroll.dataLoaded();
        });
    });
};

Anyone who has experience with this?