CRUD операции через Ajax

Backbone.js предоставляет легковесную структуру для построения клиентских веб-приложений, основанную на моделях, коллекциях, представлениях и маршрутах. Одной из ключевых возможностей является работа с данными через CRUD операции (Create, Read, Update, Delete) с использованием Ajax-запросов к серверу. Backbone облегчает синхронизацию клиентских моделей с серверной стороной.

Модели и синхронизация

В Backbone.js модель (Backbone.Model) представляет собой абстракцию данных с методами для их управления. Каждая модель может быть синхронизирована с сервером через метод sync, который автоматически вызывается методами fetch, save и destroy.

Основные методы:

  • fetch([options]) — загружает данные модели с сервера.
  • save([attributes], [options]) — сохраняет изменения модели на сервере. Если модель новая, выполняется POST-запрос, иначе PUT.
  • destroy([options]) — удаляет модель с сервера через DELETE-запрос.

Пример создания модели:

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

var task = new Task({ id: 1 });
  • urlRoot определяет базовый URL для запросов CRUD.
  • defaults задаёт начальные значения атрибутов модели.

Получение данных (Read)

Метод fetch используется для получения данных с сервера. Он выполняет GET-запрос по URL модели (url или urlRoot + id).

task.fetch({
    success: function(model, response) {
        console.log('Данные загружены', model.toJSON());
    },
    error: function(model, response) {
        console.error('Ошибка при загрузке данных');
    }
});
  • Сервер должен возвращать JSON с данными модели.
  • В options можно передавать параметры запроса через data.

Создание новой модели (Create)

Для добавления нового объекта на сервер создаётся новая модель без id. Метод save выполнит POST-запрос:

var newTask = new Task({
    title: 'Изучить Backbone.js',
    completed: false
});

newTask.save(null, {
    success: function(model, response) {
        console.log('Модель создана', model.toJSON());
    },
    error: function(model, response) {
        console.error('Ошибка создания модели');
    }
});
  • Если сервер возвращает объект с присвоенным id, Backbone автоматически обновляет модель.
  • Атрибуты можно передавать как первый аргумент save(attributes).

Обновление модели (Update)

Для изменения существующей модели используется метод save. Backbone определяет, что модель уже существует, если у неё есть id. Запрос выполняется методом PUT:

task.save({ completed: true }, {
    success: function(model, response) {
        console.log('Модель обновлена', model.toJSON());
    },
    error: function(model, response) {
        console.error('Ошибка обновления модели');
    }
});
  • Можно обновлять сразу несколько атрибутов.
  • options.patch = true позволяет отправлять PATCH-запрос, изменяя только переданные поля.

Удаление модели (Delete)

Метод destroy удаляет модель с сервера:

task.destroy({
    success: function(model, response) {
        console.log('Модель удалена');
    },
    error: function(model, response) {
        console.error('Ошибка удаления модели');
    }
});
  • DELETE-запрос отправляется по URL модели.
  • После успешного удаления модель можно удалить из коллекции или интерфейса.

Коллекции и массовые операции

Коллекция (Backbone.Collection) представляет набор моделей одного типа. Для CRUD операций коллекция упрощает загрузку списка объектов:

var Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

var tasks = new Tasks();

tasks.fetch({
    success: function(collection, response) {
        console.log('Список задач загружен', collection.toJSON());
    }
});
  • GET-запрос к /tasks возвращает массив объектов.
  • Коллекция автоматически создаёт модели на основе полученных данных.
  • Добавление новых моделей в коллекцию автоматически позволяет использовать save для их создания на сервере.
tasks.create({ title: 'Новая задача', completed: false });
  • create выполняет POST-запрос и добавляет модель в коллекцию.

Настройка Ajax-запросов

Backbone использует jQuery.ajax (или аналог) для всех синхронизаций. Настроить запросы можно через options:

  • headers — добавить заголовки (например, авторизацию).
  • data — дополнительные параметры GET или POST.
  • beforeSend — кастомная функция перед отправкой запроса.
task.fetch({
    headers: { 'Authorization': 'Bearer token' },
    data: { include: 'details' }
});
  • Сервер может возвращать данные в JSON-формате или использовать RESTful подход с различными HTTP-методами.

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

Backbone поддерживает события, которые помогают отслеживать изменения:

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

Пример подписки:

task.on('change', function() {
    console.log('Модель изменилась', task.toJSON());
});

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

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

Итоговые рекомендации

  • Определять url или urlRoot для моделей и коллекций.
  • Использовать fetch, save, destroy для стандартных CRUD операций.
  • Подписываться на события моделей и коллекций для реактивного обновления интерфейса.
  • Передавать options для настройки Ajax-запросов (заголовки, параметры, patch).
  • Для массовых операций использовать коллекции и метод create.

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

Оглавление