Firebase - Lazy Загрузка Список данных

У меня есть требование, когда я хочу отображать первые 10 записей в списке, и как только пользователь прокручивает вниз, я хотел бы добавить следующие 10 записей. В настоящее время я использую Angularfire, и вся документация указывает, что я не должен выполнять операции массива в $ FirebaseArray:Firebase - Lazy Загрузка Список данных

Нельзя напрямую манипулировать этим массивом. Такие методы, как splice(), push(), pop() и unshift(), приведут к тому, что данные перестанут синхронизироваться с сервером.

Так мои варианты, чтобы загрузить следующие 10 записей и:

Используйте $ Add(), который будет писать их на сервер снова (думаю, что это может вызвать неприятную рекурсию)
Используйте 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()." Так вы добавляете/удаляете элементы. Но реализация бесконечного списка прокрутки не документируется так. Вы уже начали его внедрять? –

Также взгляните на это сообщение в блоге от Kato: https://www.firebase.com/blog/2013-10-01-queries-part-one.html#paginate. Он демонстрирует, как выполнять разбиение на страницы, что по сути является тем, как вы намереваетесь реализовать нагрузку по требованию. –

@Frank van Puffelen Я раньше смотрел пример страницы из Като, однако прецедент немного отличается. В разбивке на страницы вы заменяете существующий список новым списком. Что мне нужно сделать, так это добавить текущий список со следующими 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 - Lazy Загрузка Список данных

ответ

Смежные вопросы