Backbone exemplo 02: Views aninhadas
Pequeno exemplo de script Backbone (JavaScript) onde exploro views aninhadas.
Este é o segundo exemplo demonstrando o Backbone, ele é uma extensão do primeiro (o anterior). Por tanto, se você não conseguir entender este código, aconselho a tentar entender o anterior.
Neste exemplo mostraremos como utilizar uma view aninhada (nested).
Nosso HTML continua o mesmo…
<div class="container">
<table class="table">
<caption><button id="add" class="btn btn-success">Add list item</button></caption>
</table>
</div>
E a interface também…
O que vemos de diferente é um visão separada para cada elemento tr, veja o código.
// model
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
// collection
var List = Backbone.Collection.extend({
model: Item
});
//
// View representando cada linha (`tr`) de nossa tabela
//
var ItemView = Backbone.View.extend({
tagName: 'tr',
template: _.template("<td><%= id %></td><td><%= part1 %> <%= part2 %></td>"),
render: function() {
// De onde vem "this.model" ?
// esperamos que o model seja passado como parâmetro
// ao extendermos a classe.
this.$el.html(this.template(this.model.attributes));
return this; // <--- atenção
}
});
//
// Esta é a visão principal
//
var ListView = Backbone.View.extend({
el: $('table'),
events: {
'click button#add': 'addItem'
},
initialize: function () {
this.collection = new List();
this.collection.on('add', this.appendItem, this);
},
addItem: function () {
var item = new Item({
id: (this.collection.length + 1)
});
this.collection.add(item);
},
// Função que renderiza cada linha.
// Ela é a responsável por chamar a view filha
appendItem: function (item) {
var itemView = new ItemView({
model: item
});
this.$el.append(itemView.render().el);
}
});
var listView = new ListView();