© 2018 WebHive

Пагинация в Ember

Давно хотел разобраться с пагинацией в Ember.js. В сети много материалов по теме, но с учётом быстрого развития фреймворка материалы эти как правило устарели и не представляют интереса. Ну и по результатам моих экспериментов и исследований решил написать статью.

Для начала должен сказать, что использую ember.js версии 1.4.0 в связке с ember-data версии 1.0.0.beta.7
И тут подкралась засада — дело в том, что я сторонник передавать параметры пагинации через GET параметры, а текущая на данный момент версия ember не умеет эти параметры получать. Но в canary версии эта возможность есть, поэтому использовать будем именно её.

Включаем в ember разбор GET параметров

Эта функция экспериментальная поэтому для её включения нужно выполнить небольшой трюк.
Нужно указать ember какие возможности подключены — нас в данном случае интересует параметр query-params-new

1
2
@ENV = FEATURES:
'query-params-new': true

Этот кусок кода должен стоять ДО подключения библиотек emaber

Загрузка коллекций

Начну со способа загрузки коллекций. Здесь всё достаточно просто — используем запрос с параметрами. Модель как и положено загружается в роуте. В качестве параметра передается номер страницы. Чтобы GET параметр передавался в params метода model роута нужно его объявить в свойствах роута queryParams. Как мы видим у параметра есть 2 опции

  • refreshModel
  • replace — заменяет параметры в URL через pushState
1
2
3
4
5
6
7
8
App.PostIndexRoute = Ember.Route.extend
queryParams:
page:
refreshModel: true
replace: true

model: (params) ->
@store.find 'post', { page: params.page }

Так же GET параметры нужно добавить в контроллер. В массиве queryParams описываются используемые GET параметры. Само значение параметра сохраняется в одноимённую переменную.

1
2
3
App.PostIndexController = Ember.ArrayController.extend
queryParams: ['page']
page: null

Теперь посмотрим со стороны сервера. Собственно поймать, параметр и достать из БД нужные записи особого труда не составит. Основной вопрос как передать параметры пагинации в модель ember? В сети есть много извращенческих подходов к решению этой проблемы. Отчасти это вызвано отсутствием для этого в ember соответствующих механизмов. Но нам повезло и на сегодняшний момент ember-data поддерживает так называемые meta параметры, набор дополнительной метаинформации который может быть передан модели. Именно через meta мы и будем передавать эти данные.

В данном случае для пагинации на стороне сервера используется kaminari, поэтому в meta передаём параметры пагинации возвращаемые kaminari.

1
2
3
4
5
def index
page = params[:page] || 1
@posts = Post.all.page(page)
respond_with @posts, meta: { total: @posts.total_count, page: @posts.current_page }
end

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

Комментарии