Давно хотел разобраться с пагинацией в Ember.js. В сети много материалов по теме, но с учётом быстрого развития фреймворка материалы эти как правило устарели и не представляют интереса. Ну и по результатам моих экспериментов и исследований решил написать статью.
Для начала должен сказать, что использую ember.js версии 1.4.0 в связке с ember-data версии 1.0.0.beta.7
И тут подкралась засада — дело в том, что я сторонник передавать параметры пагинации через GET параметры, а текущая на данный момент версия ember не умеет эти параметры получать. Но в canary версии эта возможность есть, поэтому использовать будем именно её.
Включаем в ember разбор GET параметров
Эта функция экспериментальная поэтому для её включения нужно выполнить небольшой трюк.
Нужно указать ember какие возможности подключены — нас в данном случае интересует параметр query-params-new
@ENV = FEATURES:
'query-params-new': true
Этот кусок кода должен стоять ДО подключения библиотек emaber
Загрузка коллекций
Начну со способа загрузки коллекций. Здесь всё достаточно просто — используем запрос с параметрами. Модель как и положено загружается в роуте. В качестве параметра передается номер страницы. Чтобы GET параметр передавался в params метода model роута нужно его объявить в свойствах роута queryParams. Как мы видим у параметра есть 2 опции
- refreshModel
- replace — заменяет параметры в URL через pushState
App.PostIndexRoute = Ember.Route.extend
queryParams:
page:
refreshModel: true
replace: true
model: (params) ->
@store.find 'post', { page: params.page }
Так же GET параметры нужно добавить в контроллер. В массиве queryParams описываются используемые GET параметры. Само значение параметра сохраняется в одноимённую переменную.
App.PostIndexController = Ember.ArrayController.extend
queryParams: ['page']
page: null
Теперь посмотрим со стороны сервера. Собственно поймать, параметр и достать из БД нужные записи особого труда не составит. Основной вопрос как передать параметры пагинации в модель ember? В сети есть много извращенческих подходов к решению этой проблемы. Отчасти это вызвано отсутствием для этого в ember соответствующих механизмов. Но нам повезло и на сегодняшний момент ember-data поддерживает так называемые meta параметры, набор дополнительной метаинформации который может быть передан модели. Именно через meta мы и будем передавать эти данные.
В данном случае для пагинации на стороне сервера используется kaminari, поэтому в meta передаём параметры пагинации возвращаемые kaminari.
def index
page = params[:page] || 1
@posts = Post.all.page(page)
respond_with @posts, meta: { total: @posts.total_count, page: @posts.current_page }
end
Комментарии