Backbone.Paginator

Backbone.Paginator — это расширение для Backbone.js, предназначенное для удобного управления пагинацией и постраничной загрузкой данных. Он облегчает работу с коллекциями, позволяя разделять их на страницы, управлять состоянием текущей страницы и интегрировать серверные и клиентские методы получения данных. Основное преимущество Backbone.Paginator — абстракция логики пагинации, что позволяет сосредоточиться на работе с данными и интерфейсом.

Типы коллекций в Backbone.Paginator

Backbone.Paginator предоставляет два основных типа коллекций для работы с постраничными данными:

  1. ClientPager Коллекция для постраничного отображения данных, которые уже загружены на клиент. Все элементы загружаются сразу, а отображение делается по страницам локально. Основные свойства:

    • currentPage — текущая страница.
    • perPage — количество элементов на странице.
    • totalRecords — общее количество элементов.
    • totalPages() — метод для вычисления общего числа страниц.

    Пример конфигурации ClientPager:

    var MyClientCollection = Backbone.Paginator.requestPager.extend({
    model: MyModel,
    paginator_core: {
        type: 'GET',
        dataType: 'json',
        url: '/data'
    },
    paginator_ui: {
        firstPage: 1,
        currentPage: 1,
        perPage: 10,
        totalRecords: 100
    },
    server_api: {},
    parse: function(response) {
        return response.items;
    }
});

  2. ServerPager Коллекция для постраничного отображения данных с сервера. Данные загружаются по мере необходимости, запрашивая только нужную страницу. ServerPager особенно полезен при работе с большими наборами данных. Ключевые свойства:

    • currentPage — текущая страница.
    • perPage — количество элементов на странице.
    • totalRecords — получаемое от сервера количество записей.
    • server_api — объект, описывающий параметры запроса к серверу (например, page, per_page).

    Пример конфигурации ServerPager:

    var MyServerCollection = Backbone.Paginator.requestPager.extend({
    model: MyModel,
    paginator_core: {
        type: 'GET',
        dataType: 'json',
        url: '/api/items'
    },
    paginator_ui: {
        firstPage: 1,
        currentPage: 1,
        perPage: 20
    },
    server_api: {
        'page': function() { return this.currentPage; },
        'per_page': function() { return this.perPage; }
    },
    parse: function(response) {
        this.totalRecords = response.total;
        return response.items;
    }
});

Управление состоянием пагинации

Backbone.Paginator предоставляет методы для управления текущей страницей и навигацией:

  • getFirstPage() — перейти на первую страницу.
  • getPreviousPage() — перейти на предыдущую страницу.
  • getNextPage() — перейти на следующую страницу.
  • getLastPage() — перейти на последнюю страницу.
  • goTo(page) — перейти на указанную страницу.

Пример использования методов навигации:

collection.getNextPage(); // загружает следующую страницу
collection.goTo(5);       // загружает пятую страницу

Настройка параметров сервера

server_api позволяет динамически задавать параметры запроса для серверной пагинации. Каждый параметр может быть функцией, которая возвращает текущее значение. Это удобно для фильтрации и сортировки данных.

Пример с фильтром:

var FilteredCollection = Backbone.Paginator.requestPager.extend({
    model: MyModel,
    paginator_core: {
        type: 'GET',
        dataType: 'json',
        url: '/api/items'
    },
    paginator_ui: {
        firstPage: 1,
        currentPage: 1,
        perPage: 10
    },
    server_api: {
        'page': function() { return this.currentPage; },
        'per_page': function() { return this.perPage; },
        'category': function() { return this.categoryFilter; }
    },
    parse: function(response) {
        this.totalRecords = response.total;
        return response.items;
    }
});

Здесь параметр category автоматически подставляется в запрос в зависимости от текущего значения фильтра.

Методы и события

Backbone.Paginator расширяет стандартные методы Backbone.Collection и добавляет события для отслеживания изменений пагинации:

  • События:

    • pageChange — срабатывает при смене страницы.
    • reset — срабатывает после загрузки новой страницы (как стандартное событие коллекции).

  • Методы:

    • hasNextPage() — проверяет, есть ли следующая страница.
    • hasPreviousPage() — проверяет, есть ли предыдущая страница.
    • totalPages() — возвращает количество страниц.
    • toJSON() — возвращает данные текущей страницы.

Пример обработки события смены страницы:

collection.on('pageChange', function() {
    console.log('Текущая страница:', collection.currentPage);
});

Интеграция с интерфейсом

Backbone.Paginator хорошо интегрируется с Backbone.View. Для динамической отрисовки элементов коллекции достаточно подписаться на события reset и обновлять DOM.

Пример простого представления с навигацией:

var ItemsView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.collection, 'reset', this.render);
    },
    render: function() {
        this.$el.empty();
        this.collection.each(function(model) {
            this.$el.append('<li>' + model.get('name') + '</li>');
        }, this);
        return this;
    }
});

var collection = new MyServerCollection();
var view = new ItemsView({ collection: collection, el: '#items-list' });
collection.getFirstPage();

Для создания интерфейса пагинации можно добавить кнопки «Следующая» и «Предыдущая», связывая их с методами getNextPage() и getPreviousPage().

Поддержка расширенной функциональности

Backbone.Paginator позволяет реализовать дополнительные возможности:

  • Сортировка: через серверные параметры или локальную сортировку ClientPager.
  • Фильтрация: через server_api с динамическими значениями.
  • Кэширование страниц: сохранение уже загруженных страниц для ускорения навигации в ClientPager.
  • Совместимость с REST API: ServerPager легко настраивается под стандартные REST-запросы с параметрами пагинации.

Backbone.Paginator обеспечивает гибкую и масштабируемую структуру для постраничного управления данными, сохраняя при этом совместимость с привычными коллекциями Backbone.

Оглавление