Сортировка и фильтрация данных

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

Коллекции и порядок элементов

Коллекция в Backbone.js представляет собой упорядоченный набор моделей. Порядок элементов внутри коллекции определяется либо порядком их добавления, либо пользовательской функцией сортировки. Каждая коллекция может иметь:

  • comparator — функция или строка, задающая порядок элементов.
  • Методы sort и sortBy для явной сортировки коллекции.

Пример задания компаратора по полю name:

var Users = Backbone.Collection.extend({
    comparator: 'name'
});

var users = new Users([
    {name: 'Анна', age: 25},
    {name: 'Борис', age: 30},
    {name: 'Виктор', age: 20}
]);

users.sort();
console.log(users.pluck('name')); // ['Анна', 'Борис', 'Виктор']

Если требуется сложная логика сортировки, можно использовать функцию:

var Users = Backbone.Collection.extend({
    comparator: function(user) {
        return -user.get('age'); // сортировка по убыванию возраста
    }
});

users.sort();
console.log(users.pluck('age')); // [30, 25, 20]

Фильтрация данных

Фильтрация позволяет получать подмножества коллекции по определённым условиям. Backbone.js предоставляет методы filter, where и findWhere.

  • filter(predicate) — возвращает массив моделей, удовлетворяющих функции predicate.
var adults = users.filter(function(user) {
    return user.get('age') >= 25;
});
console.log(adults.map(u => u.get('name'))); // ['Анна', 'Борис']
  • where(attributes) — возвращает все модели, совпадающие с заданными атрибутами.
var borises = users.where({name: 'Борис'});
console.log(borises[0].get('age')); // 30
  • findWhere(attributes) — возвращает первую модель, совпадающую с заданными атрибутами.
var viktor = users.findWhere({name: 'Виктор'});
console.log(viktor.get('age')); // 20

Комбинированная сортировка и фильтрация

Сортировка и фильтрация часто применяются совместно. Поскольку методы фильтрации возвращают массив, а не коллекцию, для сохранения функциональности Backbone рекомендуется создавать новые коллекции на основе отфильтрованных данных:

var adultsCollection = new Users(users.filter(function(user) {
    return user.get('age') >= 25;
}));

adultsCollection.comparator = 'age';
adultsCollection.sort();
console.log(adultsCollection.pluck('name')); // ['Анна', 'Борис']

Это позволяет работать с уже отсортированными и фильтрованными данными как с полноценной коллекцией Backbone.

Реактивная сортировка и фильтрация

Коллекции Backbone поддерживают события add, remove, change. Это позволяет динамически обновлять фильтрованные или отсортированные представления при изменении данных.

Пример реактивного списка:

var AdultUsersView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.collection, 'add remove change', this.render);
    },
    render: function() {
        var adults = this.collection.filter(function(user) {
            return user.get('age') >= 25;
        });
        adults.sort((a, b) => a.get('age') - b.get('age'));

        this.$el.empty();
        adults.forEach(user => {
            this.$el.append('<li>' + user.get('name') + '</li>');
        });
        return this;
    }
});

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

Использование sortBy и groupBy

Метод sortBy возвращает отсортированный массив моделей на основе функции или атрибута:

var sortedByAge = users.sortBy('age');
console.log(sortedByAge.map(u => u.get('name'))); // ['Виктор', 'Анна', 'Борис']

Метод groupBy позволяет сгруппировать модели по значению атрибута:

var groupedByAge = users.groupBy('age');
console.log(groupedByAge[25].map(u => u.get('name'))); // ['Анна']

Комбинация groupBy, filter и sortBy предоставляет гибкие возможности для сложных операций с данными.

Закрепление практических принципов

  1. Определять компаратор в коллекции, если требуется постоянная сортировка.
  2. Использовать filter, where, findWhere для выборки моделей по условиям.
  3. Создавать новые коллекции на основе фильтров для сохранения функциональности Backbone.
  4. Применять события коллекции для реактивного обновления представлений.
  5. Использовать sortBy и groupBy для краткой и понятной работы с массивами моделей.

Эти инструменты позволяют строить масштабируемые приложения с гибкой логикой отображения данных, сохраняя преимущества структуры Backbone.js.

Оглавление