RESTful API и Backbone.sync

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

Основы Backbone.sync

Backbone.sync — это универсальный интерфейс для коммуникации с сервером. По умолчанию он использует метод jQuery.ajax для выполнения CRUD-операций (Create, Read, Update, Delete), соответствующих стандартным HTTP-методам:

  • Create → POST
  • Read → GET
  • Update → PUT
  • Delete → DELETE

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

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

var Task = Backbone.Model.extend({
    urlRoot: '/tasks'
});

var task = new Task({ id: 1 });
task.fetch(); // GET /tasks/1
task.save({ title: 'New title' }); // PUT /tasks/1
task.destroy(); // DELETE /tasks/1

Настройка URL для моделей и коллекций

Для корректного построения RESTful-запросов каждая модель должна иметь свойство urlRoot, а коллекция — url.

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

var tasks = new TasksCollection();
tasks.fetch(); // GET /tasks

В случае вложенных ресурсов URL можно формировать динамически с использованием функций:

var Comment = Backbone.Model.extend({
    urlRoot: function() {
        return '/tasks/' + this.get('taskId') + '/comments';
    }
});

Переопределение Backbone.sync

Для работы с нестандартным API или с дополнительными требованиями (например, авторизация, обработка заголовков) можно переопределить метод Backbone.sync.

Пример кастомного sync с добавлением токена авторизации:

Backbone.sync = function(method, model, options) {
    options = options || {};
    options.headers = options.headers || {};
    options.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return Backbone.ajax(_.extend(options, {
        url: options.url || _.result(model, 'url'),
        type: methodMap[method],
        data: model && (method === 'create' || method === 'update') ? JSON.stringify(model.toJSON()) : null,
        contentType: 'application/json'
    }));
};

var methodMap = {
    'create': 'POST',
    'update': 'PUT',
    'patch':  'PATCH',
    'delete': 'DELETE',
    'read':   'GET'
};

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

Работа с RESTful API

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

Особенности:

  • Автоматическое обновление модели: вызов fetch() обновляет состояние модели данными с сервера.
  • Поддержка частичного обновления: метод save() с опцией {patch: true} выполняет HTTP PATCH-запрос, отправляя только изменённые поля.
  • Синхронизация коллекций: коллекции используют fetch() для загрузки набора ресурсов, автоматически создавая модели по полученным JSON-объектам.
task.save({ completed: true }, { patch: true }); // PATCH /tasks/1

Обработка ошибок и событий

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

task.on('sync', function() {
    console.log('Модель успешно синхронизирована с сервером');
});

task.on('error', function(model, response) {
    console.error('Ошибка при синхронизации', response);
});

Для коллекций:

tasks.on('update', function() {
    console.log('Коллекция обновлена');
});

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

Интеграция с JSON API и другими форматами

Хотя Backbone.js изначально ориентирован на стандартный JSON, при необходимости можно адаптировать parse и toJSON для соответствия конкретному формату API.

var Task = Backbone.Model.extend({
    parse: function(response) {
        return response.data.attributes; // соответствие JSON API
    },
    toJSON: function() {
        return { data: { type: 'tasks', attributes: _.clone(this.attributes) } };
    }
});

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

Заключение по Backbone.sync и RESTful API

Механизм Backbone.sync является центральным компонентом для взаимодействия с RESTful-сервером, обеспечивая удобную интеграцию CRUD-операций, централизованное управление запросами и событийное оповещение о результатах. Гибкость настройки URL, переопределение sync и адаптация формата данных делают Backbone.js мощным инструментом для построения масштабируемых клиентских приложений.

Оглавление