Scriptify.ru

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

Подготовительные действия

Для начала необходимо создать "болванку" приложения, в которой будут установлены зависимости, необходимые для работы Backbone:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Модели Backbone</title>
</head>
<body>
</body>
<script src="jquery-3.1.0.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script>
// место для кода
</script>
</html>

Для всех дальнейших дальнейших действий мы будем использовать консоль разработчика (Chrome Developer Tools, Opera DragonFly и им подобные).

Создание модели

Для того чтобы создать модель, необходимо расширить класс Backbone.Model при помощи метода extend():

var todoModel = Backbone.Model.extend({
// ваш код
});
// Теперь создаем экземпляр созданной модели
var todoInstance = new todoModel();

Инициализация модели

Если при создании модели необходимо произвести какое-либо действие, используется метод initialize:

var todoModel = Backbone.Model.extend({
    initialize: function() {
        console.log('Создан экземпляр модели');
    }
});
var todoInstance = new todoModel();
// В консоль: 
// создан экземпляр модели

Атрибуты по умолчанию

Как правило, при создании модели необходимо задать ее значения по умолчанию. Для этого используется свойство defaults:

var todoModel = Backbone.Model.extend({
    defaults: {
        title: 'новая задача',
        completed: true
    }
});
var todoInstance = new todoModel();
// получаем данные объекта в виде JSON строки
console.log('Установлены значения по умолчанию: ' + (JSON.stringify(todoInstance)));
// В консоль:
// Установлены значения по умолчанию: {"title":"новая задача","completed":true}

Считывание данных

Метод Model.get() обеспечивает доступ к данным модели:

var todoModel = Backbone.Model.extend({
    defaults: {
        title: 'новая задача',
        completed: true
    }
});
var todoInstance = new todoModel();
var getTitle = todoInstance.get('title');
console.log('Получено значение атрибута title методом get(): ' + getTitle);
// В консоль:
// Получено значение атрибута title методом get(): новая задача

Установка данных

Метод Model.set() позволяет устанавливать значения для одного или нескольких атрибутов модели

var todoModel = Backbone.Model.extend({
    defaults: {
        title: 'новая задача',
        completed: true
    }
});
var todoInstance = new todoModel();
var setTitle = todoInstance.set('title', 'эта задача изменена методом set()');
console.log('Установлено новое значение атрибута модели. ' + (JSON.stringify(todoInstance)));
// В консоль:
// Установлено новое значение атрибута модели. {"title":"эта задача изменена методом set()","completed":true}

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

Удалить атрибут модели можно при помощи метода Model.unset():

var todoModel = Backbone.Model.extend({
    defaults: {
        title: 'новая задача',
        completed: true
    }
});
var todoInstance = new todoModel();
var setTitle = todoInstance.unset('title');
console.log('Атрибут title модели удален. ' + (JSON.stringify(todoInstance)));
// В консоль: 
// Атрибут title модели удален. {"completed":true}

Прослушивание изменений модели

Если при изменении модели необходимо произвести какое либо действие, например вывести уведомление, можно добавить слушателя событий. Это удобно сделать в функции initialize. Можно также прослушивать изменения отдельных атрибутов:

var todoModel = Backbone.Model.extend({
    defaults: {
        title: 'новая задача',
        completed: true
    },
    initialize: function() {
        // прослушивание изменения атрибута title
        this.on('change:title', function() {
            console.log('был изменен атрибут title');
        });
        // прослушивание изменения всех атрибутов
        this.on('change', function() {
            console.log('был изменен атрибут модели');
        });
    }
});
var todoInstance = new todoModel();
var setTitle = todoInstance.set('title', 'эта задача изменена методом set()');
// В консоль: 
// был изменен атрибут title
// был изменен атрибут модели

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

Валидация позволяет проверять значения атрибутов перед их установкой. По умолчанию валидация выполняется при сохранении модели методом save() и при вызове метода set() с аргументом {validate:true}.

var todoModel = Backbone.Model.extend({
    defaults: {
        completed: false
    },
    validate: function(attribs) {
        if (attribs.title === undefined) {
            return "Необходимо установить значение атрибута title!";
        }
    },
    initialize: function() {
        this.on("invalid", function(model, error) {
            console.log(error);
        });
    }
});
var todoInstance = new todoModel();
todoInstance.set('completed', true, {validate: true});
// В консоль: 
// Необходимо установить значение атрибута title! 

Содержание статьи