В данной части видеокаста мы познакомимся с моделями backbone: создадим свою первую модель, заполним её данными default (по-умолчанию) и научимся создавать свои собственные методы для объектов backbone и многое другое.
В предыдущем уроке Николай уже дал общее представление о том, что же такое модели и с чем их едят. Модели в backbone представляют для разработчика огромный интерес тем, что в них уже имеется большой список полезных методов, с которыми мы будем шаг за шагом знакомиться.
Прежде всего модель нужно создать. Делается это с помощью функции extend, путём расширения объекта Backbone.Model. Как результат мы имеем свой собственный класс модели, корректно унаследовавший всю цепочку прототипов:
var Person = Backbone.Model.extend({
});
Теперь давайте “забьём” в наш класс Person данные, которые будут наследоваться каждым вновь созданным экземпляром модели, по умолчанию. Для этого воспользуемся свойством default. Если в момент создания экземпляра модели какие-либо данные не будут указаны, то они просто примут значения по умолчанию.
var Person = Backbone.Model.extend({
defaults: {
name: 'Dima',
age: 23,
job: 'web developer'
},
});
Чтобы создать экземпляр модели c атрибутами по умолчанию, воспользуемся следующим кодом:
var person = new Person;
Чтобы создать экземпляр модели с новыми данными напишем так:
var person = new Person({'name':'Andrey', 'age':27});
Чтобы изменить какие-либо данные нам пригодится функция set(). Делается это так:
person.set({'age': 50});
Менять/получать атрибуты можно только используя специальные функции. Это сделано специально, чтобы backbone в любой момент времени знал, что происходит с данными. Если мы меняем какой-либо атрибут, происходит событие change, на которое удобно повесить какой-либо обработчик, например перерисовку dom’a.
Совершенно аналогично, для получения атрибута используется метод get():
person.get('age');
Ну и на последок научимся добавлять свои собственные методы для вновь созданных моделей:
var Person = Backbone.Model.extend({
defaults: {
name: 'Dima',
age: 23,
job: 'web developer'
},
walk: function() {
return this.get('name') + ' is walking.';
}
});
Источник:loftblog