Добавление, удаление и поиск моделей

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

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

Для добавления модели в коллекцию используется метод add. Он принимает один объект модели или массив объектов. Пример:

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

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

var tasks = new TasksCollection();

tasks.add({ title: 'Сделать домашку', completed: false });
tasks.add([
    { title: 'Купить продукты', completed: false },
    { title: 'Позвонить другу', completed: true }
]);

Ключевые моменты:

  • Если модель с таким id уже существует в коллекции, она не будет добавлена повторно.
  • add триггерит событие add, что позволяет отслеживать изменения коллекции.
  • Можно использовать опцию { at: index }, чтобы вставить модель в определённое место коллекции:
tasks.add({ title: 'Срочная задача' }, { at: 1 });

Удаление моделей

Удаление моделей осуществляется через метод remove. Он принимает либо модель, либо массив моделей, либо идентификатор модели (id):

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

// Удаление по id
tasks.remove(2);

Особенности метода remove:

  • Удалённая модель получает событие remove.
  • Если модель удаляется из коллекции, но её экземпляр всё ещё используется, она не уничтожается полностью, а просто удаляется из коллекции.
  • Для полного уничтожения модели вместе с коллекцией можно использовать метод destroy, который также отправляет HTTP-запрос на сервер:
task.destroy({
    success: function(model, response) {
        console.log('Модель удалена на сервере');
    }
});

Поиск моделей в коллекции

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

  1. Поиск по id или cid:
var found = tasks.get(1); // поиск по id
var foundByCid = tasks.getByCid(task.cid); // устаревший метод, в новых версиях get(cid) работает
  1. Поиск по атрибутам через findWhere и where:
var completedTask = tasks.findWhere({ completed: true }); // первая модель с completed = true
var allCompleted = tasks.where({ completed: true }); // все модели с completed = true
  • findWhere возвращает первую подходящую модель.
  • where возвращает массив всех подходящих моделей.
  1. Использование функций фильтрации:
var urgentTasks = tasks.filter(function(task) {
    return task.get('title').includes('Срочная');
});
  • Методы filter, find, map, each и другие предоставляются коллекцией благодаря интеграции с Underscore.js.
  • Фильтры позволяют создавать динамические выборки моделей без изменения самой коллекции.

Обновление коллекции при изменении модели

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

task.on('change:completed', function(model, value) {
    console.log('Статус задачи изменён:', value);
});

task.set('completed', true);
  • Изменение модели в коллекции не требует повторного добавления.
  • Коллекция триггерит события update при добавлении или удалении моделей.

Работа с сервером

Для синхронизации коллекций с сервером используются методы fetch, save, destroy:

tasks.fetch({
    success: function(collection) {
        console.log('Данные загружены с сервера');
    }
});

var newTask = new Task({ title: 'Новая задача' });
newTask.save(); // POST на сервер
  • Метод fetch загружает данные и автоматически вызывает add для новых моделей.
  • Метод save создаёт или обновляет модель на сервере.
  • Метод destroy удаляет модель на сервере и в коллекции.

Оптимизация работы с коллекциями

  • Для массового добавления или удаления моделей можно использовать массивы, чтобы снизить количество событий.
  • Для поиска большого количества моделей лучше использовать методы Underscore.js (filter, map) для гибких запросов.
  • События коллекций позволяют строить реактивные интерфейсы без постоянного контроля состояния моделей.

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

Оглавление