Давно хотел разобраться с пагинацией в 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