Сразу к делу! Наш менеджер контактов продолжает расцветать. Сегодня мы напишем отображение контактов на странице и автоматическое обновление html и dom-дерева, при добавлении нового контакта в коллекцию.
Начнем с двух новых видов – вида списка всех контактов и вида единичного контакта. Все это мы уже проходили, поэтому в подробности вдаваться не будем. Единственное новое, в качестве шаблонизатора мы будем использовать handlebars.js:
/*
|---------------------------------------------------
| All Contacts View
|---------------------------------------------------
*/
App.Views.Contacts = Backbone.View.extend({
tagName: 'tbody',
render: function() {
this.collection.each( this.addOne, this );
return this;
},
addOne: function(contact) {
var contactView = new App.Views.Contact({ model: contact });
console.log( contactView.render().el );
this.$el.append(contactView.render().el);
}
});
/*
|---------------------------------------------------
| Single Contact View
|---------------------------------------------------
*/
App.Views.Contact = Backbone.View.extend({
tagName: 'tr',
template: '',
render: function() {
this.$el.html();
}
});Подключаем handlebars и пишем шаблон контакта:
<script id="contactTemplate" type="text/template">
<td>{{ first_name }}</td>
<td>{{ last_name }}</td>
<td>{{ email_address}}</td>
<td>{{ description }}</td>
</script>В main.js напишем вспомогательную функцию компиляции шаблонов:
App.template = function(id) {
return Handlebars.compile( $('#' + id).html() );
};Теперь просто передаем в нашу функцию template айдишник шаблона и записываем все это в свойства вида.После чего, в элемент tr нашего вида вставляем сгенерённый шаблон контакта, с данными из модели:
App.Views.Contact = Backbone.View.extend({
tagName: 'tr',
template: App.template('contactTemplate'),
render: function() {
this.$el.html( this.template( this.model.toJSON() ) );
return this;
}
});Создаем экземпляр нашего вида списка контактов, передаем в него коллекцию и рендерим:
App.Views.App = Backbone.View.extend({
initialize: function() {
var addContact = new App.Views.AddContact({ collection: App.contacts });
var allContactsView = new App.Views.Contacts({ collection: App.contacts }).render();
}
});Верстаем таблицу и вставляем в нее сгенеренный tbody:
<table id="allContacts">
<thead>
<tr>
<td><strong>Имя</strong></td>
<td><strong>Фамилия</strong></td>
<td><strong>Email</strong></td>
<td><strong>Описание</strong></td>
</tr>
</thead>
</table>App.Views.App = Backbone.View.extend({
initialize: function() {
var addContact = new App.Views.AddContact({ collection: App.contacts });
var allContactsView = new App.Views.Contacts({ collection: App.contacts }).render();
$('#allContacts').append( allContactsView.el );
}
});Пропишем немного стилей:
#contact-form { margin-bottom: 2em; }Теперь нужно обновлять таблицу и очищать инпуты. Начнем с очищения инпутов:
App.Views.AddContact = Backbone.View.extend({
initialize: function() {
this.first_name = $('#first_name');
this.last_name = $('#last_name');
this.email_address = $('#email_address');
this.description = $('#description');
},
el: '#contact-form',
events: {
'submit' : 'addContact'
},
addContact: function(e) {
e.preventDefault();
var newContact = this.collection.create({
first_name: this.first_name.val(),
last_name: this.last_name.val(),
email_address: this.email_address.val(),
description: this.description.val()
}, { wait: true });
this.clearForm();
},
clearForm: function() {
this.first_name.val('');
this.last_name.val('');
this.email_address.val('');
this.description.val('');
}
});И напоследок самое интересное. Делаем автоматическое обновление DOM-дерева и рендеринг HTML, при добавлении в коллекцию новой модели. Осуществляется это прослушкой события ‘Add’. Напишем ее в методе всех контактов. Как только, коллекция увеличится на одну модель, тут же сработает метода addOne:
App.Views.Contacts = Backbone.View.extend({
initialize: function() {
this.collection.on('add', this.addOne, this);
},
....
});Классно, не правда ли? До нового видеоурока!
Источник:loftblog
