var views = {};
views.PeopleItem = Backbone.View.extend({
tagName: 'tr',
initialize: function (options) {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function () {
jQuery(this.el).empty();
jQuery(this.el).append(jQuery('<td>' + this.model.get('Name') + '</td>'));
jQuery(this.el).append(jQuery('<td>' + this.model.get('Address') + '</td>'));
return this;
}
});
views.People = Backbone.View.extend({
collection: null,
el: 'tbody',
initialize: function (options) {
this.collection = options.collection;
_.bindAll(this, 'render');
this.collection.bind('reset', this.render);
this.collection.bind('add', this.render);
this.collection.bind('remove', this.render);
},
render: function () {
var element = jQuery(this.el);
element.empty();
this.collection.forEach(function (item) {
var itemView = new views.PeopleItem({
model: item
});
element.append(itemView.render().el);
});
return this;
}
});
jQuery(this.el).append(jQuery('<td>' + this.model.get('Name') + '</td>'));
jQuery(this.el).append(jQuery('<td>' + this.model.get('Address') + '</td>'));
This code specifies the columns of the table in which the data will be stored.