Ember JS: Lazy load Данные модели - PullRequest
Новая
       23

Ember JS: Lazy load Данные модели

1 голос
/ 28 мая 2019

Я пытаюсь отобразить данные модели ember, которые имеют более 1000 records. Это займет больше 2 минут, чтобы закончить рендеринг.

Итак, у меня есть план по его оптимизации. Я хочу загрузить первый 100 records в первый раз. Как только они идут до конца, тогда мне нужно загрузить второй 100 records.

Как я могу это сделать?

1 Ответ

5 голосов
/ 28 мая 2019

Получение страниц данных

Концепция - это пейджинг и зависит от того, как ваш сервер обрабатывает пейджинг. Но в общем случае, что-то вроде: 

let result = this.store.query('post', {
  limit: 10,
  offset: 0
});

после обработки серверной частью приведет к запросу к реляционной базе данных, например: 

SELECT * FROM post LIMIT 10 OFFSET 0;

Итак, вам нужно будет отслеживать текущую страницу, которую вы показываете. Каждый раз, когда вы хотите получить новую страницу, вы просто увеличиваете смещение на page * limit, где page - индекс текущей страницы. Таким образом, следующий запрос, когда page = 1 будет: 

let result = this.store.query('post', {
  limit: 10,
  offset: 10 // 1 * 10
});

Вероятно, для вашего бэкэнда будет хорошей идеей вернуть общее количество результатов, к которому вы можете получить доступ через какой-то ключ метаданных в ваших JSON ответах (или как хотите, поскольку это зависит от того, как ваш бэкэнд говорит о коллекциях). Таким образом, вы знаете, когда прекратить пытаться получить следующую страницу.

UX вокруг поиска

Вам нужно будет выбрать, хотите ли вы выполнять простую подкачку, которая предоставляет кнопки next и previous, по которым пользователь нажимает, чтобы получить следующую / предыдущую страницу. Вероятно, лучший UX для управления страницей с параметрами запроса, чтобы кнопки вперед / назад в браузере перемещали страницы и обновляли их, чтобы не потерять страницу. Вы также должны отключить / включить предыдущую и следующую кнопки, когда нет страниц для извлечения в любом направлении.

Плюсы

  • легко развивается
  • пользователь никогда не теряет своего места
  • , поскольку отображается только одна страница за раз, никаких проблем с памятью и производительностью

Против

  • пользователи должны нажимать кнопки и могут не понимать / не понимать, как

Аддоны

Альтернативой будет использование бесконечной прокрутки (а-ля новостная лента Facebook). Вы должны обратить внимание на позицию прокрутки, чтобы знать, когда нужно получить следующий вид (который требует математики для определения размеров текущих элементов). Кроме того, вы оцениваете, находится ли элемент n - 2 или что-то в этом роде в окне просмотра, а затем предварительно выбираете следующую страницу.

Плюсы

  • пользователи никогда не думают о подкачке страниц и продолжают с легкостью просматривать новый контент

Против

  • ужасно для того, чтобы вернуться к месту на странице изменения / обновления
  • ужасно для поиска
  • требует большого внимания к объему отображаемых данных, иначе вы столкнетесь с чрезмерным потреблением памяти и снижением производительности.
  • труднее писать, так как вы должны обрабатывать события прокрутки, просматривать порт и т. Д.

аддоны

...