Всем привет! Мы продолжаем знакомиться с backbone.js и сейчас я представляю вашему вниманию backbone.view. По-русски его называют “вид” или “представление”, и нужен он главным образом для того, чтобы отображать в браузере изменения change модели (с ними мы уже знакомы) и реагировать на известные всем события, вроде click, submit и пр.
Каждый вид привязан к конкретному DOM-элементу в любой момент времени, при этом не важно вставлен он в документ или нет. Предположим у вас есть список людей. Вы можете создать вид для всего списка этих людей. Или создать вид для конкретной персоны. Тогда элементом вида будет, например, тег li.
Вспомним модель персоны из предыдущих уроков:
var Person = Backbone.Model.extend({
defaults: {
name: 'Dima',
age: 23,
job: 'web developer'
}
});Создадим конструктор вида, аналогично модели:
var PersonView = Backbone.View.extend({
});Создадим экземпляр вида:
var personView = new PersonView;Элемент вида this.el создается из свойств tagName, className и id если они указаны. Если нет — el по умолчанию будет просто div’ом.
var PersonView = Backbone.View.extend({
tagName: 'li',
className: 'person',
id: 'some-person'
});
personView.el // <li class="person" id="some-person"></li>При создании экземпляра вида всегда срабатывает функция initialize:
var PersonView = Backbone.View.extend({
initialize: function() {
console.log('initialize!')
}
});Создадим теперь новую модель класса Person и вид класса PersonView, причём укажем, что созданная модель привязана к этому виду.
var person = new Person;
var personView = new PersonView({ model: person });Функция render нужна нам для наполнения нашего элемента html кодом. “Забьём” данные в наш элемент.
render: function() {
this.$el.html( this.model.get('name') + ' (' + this.model.get('age') + ') - ' + this.model.get('occupation') );
}
personView.el // <li>Dima (23) - web developer</li>Источник:loftblog
