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

Backbone.js предоставляет структурированный подход к организации данных в клиентских веб-приложениях через модели, коллекции и события. Работа с данными строится вокруг Models, Collections и их взаимодействия с сервером через RESTful API.

Модели (Models)

Модель в Backbone.js представляет собой объект, содержащий данные и бизнес-логику. Основные возможности модели:

  • Хранение атрибутов в виде ключ-значение.
  • Отслеживание изменений через события.
  • Валидация данных перед сохранением.
  • Синхронизация с сервером.

Создание модели выполняется через расширение Backbone.Model:

var Task = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    },
    validate: function(attrs) {
        if (!attrs.title) {
            return "Title is required";
        }
    }
});
  • defaults — задаёт начальные значения атрибутов модели.
  • validate — функция для проверки корректности данных перед установкой атрибутов или сохранением на сервер.

Работа с атрибутами модели

Атрибуты модели управляются методами:

  • get(attribute) — получение значения атрибута.
  • set(attributes, options) — установка значения атрибута.
  • unset(attribute) — удаление атрибута.
  • toJSON() — получение всех атрибутов модели в виде объекта.

Пример:

var task = new Task();
task.set('title', 'Создать статью');
console.log(task.get('title')); // 'Создать статью'

Метод set может принимать объект с несколькими атрибутами, а также опции для контроля событий:

task.set({ title: 'Написать документацию', completed: true }, { silent: true });

Опция { silent: true } подавляет вызов событий change.

События модели

Backbone.js использует систему событий для отслеживания изменений данных:

  • change — вызывается при любом изменении атрибутов.
  • change:attribute — вызывается при изменении конкретного атрибута.
  • destroy — при удалении модели.

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

task.on('change:title', function(model, value) {
    console.log('Title изменён на:', value);
});

task.set('title', 'Обновлённая задача'); // Событие сработает

Синхронизация с сервером

Методы fetch, save и destroy обеспечивают взаимодействие с RESTful API:

  • fetch() — загрузка данных с сервера.
  • save() — отправка изменений на сервер.
  • destroy() — удаление модели на сервере.

Пример:

task.fetch({
    success: function(model) {
        console.log('Данные загружены', model.toJSON());
    },
    error: function() {
        console.log('Ошибка загрузки данных');
    }
});

task.save({ completed: true });
task.destroy();

Коллекции (Collections)

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

  • Группировка моделей одного типа.
  • Массовые операции с моделями.
  • События добавления, удаления и изменения моделей.

Создание коллекции:

var Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});
  • model — определяет тип моделей в коллекции.
  • url — путь к серверному ресурсу.

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

  • add(model) — добавление модели.
  • remove(model) — удаление модели.
  • get(id) — получение модели по идентификатору.
  • at(index) — получение модели по позиции.
  • fetch() — загрузка всех моделей с сервера.

Пример добавления и удаления:

var tasks = new Tasks();
tasks.add(task);
tasks.remove(task);

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

Коллекции поддерживают события:

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

Пример:

tasks.on('add', function(model) {
    console.log('Добавлена задача:', model.get('title'));
});

Фильтрация и сортировка коллекций

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

  • filter(predicate) — возвращает массив моделей, удовлетворяющих условию.
  • findWhere(attrs) — возвращает первую модель с указанными атрибутами.
  • where(attrs) — возвращает массив моделей с указанными атрибутами.
  • sort() — сортировка коллекции по определённой функции comparator.

Пример фильтрации:

var completedTasks = tasks.filter(function(task) {
    return task.get('completed');
});

Подключение данных к представлениям

Модели и коллекции интегрируются с Views через события. При изменении данных автоматически обновляется интерфейс:

var TaskView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
    },
    render: function() {
        this.$el.html(this.model.get('title'));
        return this;
    }
});

var taskView = new TaskView({ model: task });
taskView.render();

listenTo обеспечивает безопасное управление событиями, предотвращая утечки памяти.

Использование REST API и Backbone.sync

Backbone использует функцию Backbone.sync для связи с сервером. По умолчанию она поддерживает CRUD операции:

  • create — POST для новой модели.
  • read — GET для загрузки модели или коллекции.
  • update — PUT для обновления модели.
  • delete — DELETE для удаления модели.

Можно переопределить sync для кастомного взаимодействия с сервером:

Backbone.sync = function(method, model, options) {
    console.log('Метод:', method, 'Модель:', model.toJSON());
    // Реализация кастомного запроса
};

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

Оглавление