Создание и инициализация коллекций

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

Определение коллекции

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

var Task = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    }
});

var TaskCollection = Backbone.Collection.extend({
    model: Task
});

В этом примере TaskCollection содержит модели Task. Указание model гарантирует, что все объекты в коллекции будут экземплярами указанной модели, что предотвращает случайное добавление некорректных данных.

Инициализация коллекции с данными

Коллекции можно создавать с уже существующими данными. Данные могут быть переданы в конструктор в виде массива объектов:

var tasks = new TaskCollection([
    { title: 'Выучить Backbone.js', completed: true },
    { title: 'Сделать проект на JS', completed: false }
]);

При этом каждый объект автоматически преобразуется в экземпляр модели Task. После инициализации коллекции доступны методы для работы с моделями: add, remove, get, at, pluck и другие.

Добавление и удаление моделей

Метод add позволяет добавить одну или несколько моделей в коллекцию:

tasks.add({ title: 'Прочитать документацию', completed: false });

Для удаления используется метод remove:

var task = tasks.at(0);
tasks.remove(task);

Методы поддерживают работу с массивами моделей, что удобно для массовых операций.

Инициализация с функцией initialize

Для выполнения логики при создании коллекции используется метод initialize. Он автоматически вызывается при создании экземпляра коллекции:

var TaskCollection = Backbone.Collection.extend({
    model: Task,
    initialize: function() {
        console.log('Коллекция создана, количество моделей:', this.length);
        this.on('add', function(model) {
            console.log('Добавлена модель:', model.get('title'));
        });
    }
});

var tasks = new TaskCollection([
    { title: 'Сделать упражнения', completed: false }
]);

Метод initialize часто используется для установки слушателей событий коллекции и начальной настройки.

События коллекции

Коллекции в Backbone.js поддерживают обширную систему событий. Основные из них:

  • add — вызывается при добавлении модели.
  • remove — вызывается при удалении модели.
  • reset — вызывается при сбросе коллекции.
  • change — вызывается при изменении атрибутов любой модели в коллекции.

Пример привязки нескольких событий:

tasks.on({
    'add': function(model) { console.log('Модель добавлена:', model); },
    'remove': function(model) { console.log('Модель удалена:', model); },
    'reset': function(collection) { console.log('Коллекция сброшена'); }
});

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

Работа с данными сервера

Коллекции могут синхронизироваться с сервером через методы fetch, create и save. Для загрузки данных с сервера используется fetch:

var tasks = new TaskCollection();
tasks.url = '/tasks';
tasks.fetch({
    success: function(collection) {
        console.log('Данные успешно загружены:', collection.toJSON());
    },
    error: function() {
        console.log('Ошибка загрузки данных');
    }
});

Метод fetch загружает данные и автоматически создаёт экземпляры модели для каждого элемента. Метод create позволяет добавлять новые модели на сервер с последующей их интеграцией в коллекцию:

tasks.create({ title: 'Новая задача', completed: false });

Методы коллекций для работы с данными

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

  • get(id) — получение модели по идентификатору.
  • at(index) — получение модели по индексу.
  • pluck(attribute) — получение массива значений заданного атрибута всех моделей.
  • where(attributes) — фильтрация моделей по атрибутам.
  • sort — сортировка коллекции по заданному критерию.
  • reset(models) — сброс коллекции новым набором моделей, вызывает событие reset.

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

Итог структуры коллекции

Коллекция в Backbone.js — это гибкий инструмент для управления группой моделей. Она обеспечивает:

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

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

Оглавление