Создание и наследование моделей

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

Определение модели

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

var Person = Backbone.Model.extend({
    defaults: {
        name: 'Неизвестно',
        age: 0
    },
    initialize: function() {
        console.log('Новая модель создана');
    },
    greet: function() {
        return 'Привет, меня зовут ' + this.get('name');
    }
});

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

  • defaults — задаёт значения по умолчанию для атрибутов модели.
  • initialize — вызывается при создании экземпляра модели.
  • Методы модели могут быть определены внутри объекта при расширении класса.

Создание экземпляра модели:

var person1 = new Person({ name: 'Иван', age: 25 });
console.log(person1.greet()); // Привет, меня зовут Иван

Если атрибут не передан при создании, используется значение из defaults.

Управление атрибутами модели

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

  • get(attr) — получает значение атрибута.
  • set(attr, value) — устанавливает значение атрибута.
  • unset(attr) — удаляет атрибут.
  • clear() — удаляет все атрибуты.
  • toJSON() — возвращает копию всех атрибутов в виде обычного объекта JavaScript.

Пример использования:

person1.set('age', 26);
console.log(person1.get('age')); // 26
person1.unset('name');
console.log(person1.get('name')); // undefined

Валидация данных

Backbone.js позволяет добавлять в модели валидацию через метод validate:

var Product = Backbone.Model.extend({
    validate: function(attrs) {
        if (!attrs.name) {
            return 'Имя продукта обязательно';
        }
        if (attrs.price < 0) {
            return 'Цена не может быть отрицательной';
        }
    }
});

var product = new Product();
product.on('invalid', function(model, error) {
    console.log('Ошибка валидации: ' + error);
});

product.set({ name: '', price: -10 }, { validate: true });

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

  • Метод validate вызывается при попытке установить новые атрибуты.
  • Если validate возвращает строку ошибки, изменение данных не применяется.
  • Событие invalid позволяет обрабатывать ошибки централизованно.

Наследование моделей

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

var Employee = Person.extend({
    defaults: function() {
        return _.extend({}, Person.prototype.defaults, {
            position: 'Сотрудник'
        });
    },
    work: function() {
        return this.get('name') + ' выполняет свои обязанности как ' + this.get('position');
    }
});

var employee1 = new Employee({ name: 'Анна', age: 30 });
console.log(employee1.work()); // Анна выполняет свои обязанности как Сотрудник

Примечания:

  • В defaults можно использовать функцию для объединения базовых значений с новыми атрибутами.
  • Наследуемые модели сохраняют все методы и события базовой модели.
  • Метод расширения extend может использоваться многократно для создания глубокой иерархии моделей.

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

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

  • change — вызывается при любом изменении атрибутов.
  • change:attr — вызывается при изменении конкретного атрибута.
  • destroy — вызывается при удалении модели.
  • sync — вызывается после успешной синхронизации с сервером.

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

person1.on('change:age', function(model, value) {
    console.log('Возраст изменился на ' + value);
});

person1.set('age', 27); // Возраст изменился на 27

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

Модели Backbone.js могут синхронизироваться с сервером с помощью стандартных методов:

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

Пример:

var user = new Person({ id: 1 });
user.fetch({
    success: function(model, response) {
        console.log('Данные загружены', response);
    }
});

user.save({ age: 28 });
user.destroy();

Используется RESTful API, где Backbone автоматически определяет HTTP-методы (GET, POST, PUT, DELETE) для операций с моделью.

Практическое применение

Создание и наследование моделей Backbone.js позволяет:

  • Разделять логику приложения на независимые единицы данных.
  • Реализовать DRY-принцип через повторное использование базовых моделей.
  • Контролировать целостность данных через валидацию.
  • Реализовать реактивные интерфейсы, где изменения моделей автоматически отражаются на представлениях через события.
  • Обеспечить лёгкую интеграцию с серверной частью через встроенные методы синхронизации.

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

Оглавление